HTML
<div class="layout row1 col1"></div>
<div class="layout row1 col2"></div>
<div class="layout row1 col3"></div>
<div class="layout row1 col4"></div>
<div class="layout row1 col5"></div>
<div class="layout row1 col6"></div>
<div class="layout row1 col7"></div>
<div class="layout row1 col8"></div>
<div class="layout row1 col9"></div>
<div class="layout row2 col1"></div>
<div class="layout row2 col2"></div>
<div class="layout row2 col3"></div>
<div class="layout row2 col4"></div>
<div class="layout row2 col5"></div>
<div class="layout row2 col6"></div>
<div class="layout row2 col7"></div>
<div class="layout row2 col8"></div>
<div class="layout row2 col9"></div>
<div class="layout row3 col1"></div>
<div class="layout row3 col2"></div>
<div class="layout row3 col3"></div>
<div class="layout row3 col4"></div>
<div class="layout row3 col5"></div>
<div class="layout row3 col6"></div>
<div class="layout row3 col7"></div>
<div class="layout row3 col8"></div>
<div class="layout row3 col9"></div>
<div class="layout row4 col1"></div>
<div class="layout row4 col2"></div>
<div class="layout row4 col3"></div>
<div class="layout row4 col4"></div>
<div class="layout row4 col5"></div>
<div class="layout row4 col6"></div>
<div class="layout row4 col7"></div>
<div class="layout row4 col8"></div>
<div class="layout row4 col9"></div>
<div class="layout row5 col1"></div>
<div class="layout row5 col2"></div>
<div class="layout row5 col3"></div>
<div class="layout row5 col4"></div>
<div class="layout row5 col5"></div>
<div class="layout row5 col6"></div>
<div class="layout row5 col7"></div>
<div class="layout row5 col8"></div>
<div class="layout row5 col9"></div>
<div class="layout row6 col1"></div>
<div class="layout row6 col2"></div>
<div class="layout row6 col3"></div>
<div class="layout row6 col4"></div>
<div class="layout row6 col5"></div>
<div class="layout row6 col6"></div>
<div class="layout row6 col7"></div>
<div class="layout row6 col8"></div>
<div class="layout row6 col9"></div>
<div class="layout row7 col1"></div>
<div class="layout row7 col2"></div>
<div class="layout row7 col3"></div>
<div class="layout row7 col4"></div>
<div class="layout row7 col5"></div>
<div class="layout row7 col6"></div>
<div class="layout row7 col7"></div>
<div class="layout row7 col8"></div>
<div class="layout row7 col9"></div>
<div class="layout row8 col1"></div>
<div class="layout row8 col2"></div>
<div class="layout row8 col3"></div>
<div class="layout row8 col4"></div>
<div class="layout row8 col5"></div>
<div class="layout row8 col6"></div>
<div class="layout row8 col7"></div>
<div class="layout row8 col8"></div>
<div class="layout row8 col9"></div>
<div class="layout row9 col1"></div>
<div class="layout row9 col2"></div>
<div class="layout row9 col3"></div>
<div class="layout row9 col4"></div>
<div class="layout row9 col5"></div>
<div class="layout row9 col6"></div>
<div class="layout row9 col7"></div>
<div class="layout row9 col8"></div>
<div class="layout row9 col9"></div>
<div class="layout left"></div>
<div class="layout right"></div>
<div class="back">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g>
<polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
200.7,251 201.7,328.3 279,329.3 279.9,406.6 357.2,407.5 358.2,484.8 435.5,485.8 "/>
</g>
<g>
<polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
596,131.5 651.3,185.5 706.7,131.5 762,185.5 817.3,131.5 872.7,185.5 928,131.5 "/>
</g>
<rect x="727.5" y="567.5" fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="100" height="100"/>
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="890.5" y1="328" x2="790.5" y2="428"/>
<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="790.5" y1="328" x2="890.5" y2="428"/>
</g>
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="148.5" y1="485" x2="148.5" y2="627"/>
<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="78" y1="556.5" x2="219" y2="556.5"/>
</g>
<polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
332.5,200 332.5,99.5 232,99.5 "/>
<polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
558.5,632.8 487.4,561.8 416,633.2 "/>
<circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="311" cy="807" r="50"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="562" cy="294" r="50"/>
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M512,816.5c36.6,0,36.6,52,73.2,52c36.6,0,36.6-52,73.2-52c36.6,0,36.6,52,73.3,52c36.6,0,36.6-52,73.3-52"/>
</g>
</svg>
<h1>Designer</h1>
</div>
<div class="front">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="161.3" cy="209.8" r="20.6"/>
<circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="362.3" cy="667.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="670.3" cy="736.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="737.3" cy="463.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="341.3" cy="381.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="847.3" cy="242.8" r="20.6"/>
<circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="943.3" cy="471.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="680.3" cy="93.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="217.3" cy="848.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="945.8" r="20.6"/>
<circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="820.3" cy="810.8" r="20.6"/>
<circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="94.3" cy="520.8" r="20.6"/>
<circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="267.8" r="20.6"/>
<circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="395.3" cy="93.8" r="20.6"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="155.2" y1="229.5" x2="100.2" y2="501.1"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="181.9" y1="209.8" x2="507.7" y2="267.8"/>
<line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="416" y1="95" x2="660" y2="95"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="405.6" y1="114.4" x2="512.7" y2="247.2"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="700.9" y1="106.3" x2="831.6" y2="229.5"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="857.4" y1="263.4" x2="931.5" y2="451.2"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="917.4" y1="471.8" x2="757.9" y2="463.8"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="512.7" y1="281.3" x2="359" y2="371.3"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="329" y1="365.3" x2="174.4" y2="225.7"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="112.5" y1="530.3" x2="344.8" y2="657"/>
<line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="382.9" y1="657" x2="718.3" y2="471.8"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="361" y1="387.8" x2="716.7" y2="463.8"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="742.1" y1="484.4" x2="820.3" y2="790.2"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="228.7" y1="831.7" x2="348.1" y2="682.7"/>
<line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="374.7" y1="684.2" x2="512.7" y2="932.4"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="538.8" y1="928.1" x2="659.7" y2="754.5"/>
<line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="731.5" y1="443.2" x2="680.3" y2="114.4"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="341.3" y1="402.4" x2="362.3" y2="647.2"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="233.3" y1="861.8" x2="507.7" y2="945.8"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="670.3" y1="716.2" x2="351.8" y2="399.5"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="267.8" x2="831.6" y2="256.2"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="684.9" y1="722.3" x2="931.5" y2="488.7"/>
<line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="945.8" x2="804.3" y2="823.8"/>
</svg>
<h1>Developer</h1>
</div>
CSS
body {
margin: 0;
height: 100vh;
}
* {
box-sizing: border-box;
}
.back {
position: relative;
background: #2980b9;
color: #fff;
}
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #fff;
justify-content: flex-end;
}
.back,
.front {
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 50px;
}
h1 {
font-family: 'Work Sans', sans-serif;
font-size: 72px;
font-weight: 800;
text-transform: uppercase;
}
.front h1 {
position: relative;
color: #ff4e4e;
text-align: right;
}
svg {
position: absolute;
opacity: 0;
-webkit-transform: translateX(50px);
transform: translateX(50px);
-webkit-transition: opacity .5s ease-in-out, transform 1s ease-out;
transition: opacity .5s ease-in-out, transform 1s ease-out;
max-height: 100%;
}
.back svg {
right: 0;
}
.front svg {
left: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
svg * {
stroke-dasharray: 500;
stroke-dashoffset: 500;
}
svg * {
animation: stroke 5s ease-in-out infinite;
}
.front circle {
animation: none;
stroke-dashoffset: 0;
}
polyline {
animation-delay: 1s;
}
polygon {
animation-delay: 2s;
}
circle {
animation-delay: 3s;
}
rect {
animation-delay: 4s;
}
line:nth-child(2n) {
animation-delay: 1s;
}
line:nth-child(3n) {
animation-delay: 2s;
}
@-webkit-keyframes stroke {
20% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: -500;
}
}
@keyframes stroke {
20% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: -500;
}
}
@media(max-width:800px) {
.back {
height: 60vh;
}
.front {
top: 40vh;
height: 60vh;
}
.front {
clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%) !important;
z-index: 1;
}
h1 {
font-size: 36px;
}
}
.layout {
position: absolute;
width: 5.55555%;
height: 11.11111%;
z-index: 1;
}
.row1 { top: 0; }
.row2 { top: 11.11111%; }
.row3 { top: 22.22222%; }
.row4 { top: 33.33333%; }
.row5 { top: 44.44444%; }
.row6 { top: 55.55555%; }
.row7 { top: 66.66666%; }
.row8 { top: 77.77777%; }
.row9 { top: 88.88888%; }
.col1 { left: 25%; }
.col2 { left: 30.55555%; }
.col3 { left: 36.11111%; }
.col4 { left: 41.66666%; }
.col5 { left: 47.22222%; }
.col6 { left: 52.77777%; }
.col7 { left: 58.33333%; }
.col8 { left: 63.88888%; }
.col9 { left: 69.55555%; }
.left,
.right{
width: 25%;
height: 100%;
top: 0;
left: 0;
}
.right {
left: 75%;
}
.front {
transition: clip-path .3s ease-in-out;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.left:hover ~ .front { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
.right:hover ~ .front { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.row1.col1:hover ~ .front { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 75% 100%); }
.row1.col2:hover ~ .front { clip-path: polygon(87.5% 0%, 100% 0%, 100% 100%, 68.75% 100%); }
.row1.col3:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 62.5% 100%); }
.row1.col4:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); }
.row1.col6:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); }
.row1.col7:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 37.5% 100%); }
.row1.col8:hover ~ .front { clip-path: polygon(12.5% 0%, 100% 0%, 100% 100%, 31.25% 100%); }
.row1.col9:hover ~ .front { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%); }
.row2.col1:hover ~ .front { clip-path: polygon(87.5% 0%, 100% 0%, 100% 100%, 68.75% 100%); }
.row2.col2:hover ~ .front { clip-path: polygon(78.375% 0%, 100% 0%, 100% 100%, 64.0625% 100%); }
.row2.col3:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 59.375% 100%); }
.row2.col4:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 54.6875% 100%); }
.row2.col6:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 45.3125% 100%); }
.row2.col7:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 40.625% 100%); }
.row2.col8:hover ~ .front { clip-path: polygon(21.875% 0%, 100% 0%, 100% 100%, 35.9375% 100%); }
.row2.col9:hover ~ .front { clip-path: polygon(12.5% 0%, 100% 0%, 100% 100%, 31.25% 100%); }
.row3.col1:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 62.5% 100%); }
.row3.col2:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 59.375% 100%); }
.row3.col3:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); }
.row3.col4:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 53.125% 100%); }
.row3.col6:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 46.875% 100%); }
.row3.col7:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); }
.row3.col8:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 40.625% 100%); }
.row3.col9:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 37.5% 100%); }
.row4.col1:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 56.25% 100%); }
.row4.col2:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 54.6875% 100%); }
.row4.col3:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 53.125% 100%); }
.row4.col4:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 51.5625% 100%); }
.row4.col6:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 48.4375% 100%); }
.row4.col7:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 46.875% 100%); }
.row4.col8:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 45.3125% 100%); }
.row4.col9:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 43.75% 100%); }
.col5:hover ~ .front,
.row5:hover ~ .front { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); }
.row6.col1:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); }
.row6.col2:hover ~ .front { clip-path: polygon(54.6875% 0%, 100% 0%, 100% 100%, 59.375% 100%); }
.row6.col3:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 56.25% 100%); }
.row6.col4:hover ~ .front { clip-path: polygon(51.5625% 0%, 100% 0%, 100% 100%, 53.125% 100%); }
.row6.col6:hover ~ .front { clip-path: polygon(48.4375% 0%, 100% 0%, 100% 100%, 46.875% 100%); }
.row6.col7:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 43.75% 100%); }
.row6.col8:hover ~ .front { clip-path: polygon(45.3125% 0%, 100% 0%, 100% 100%, 40.625% 100%); }
.row6.col9:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); }
.row7.col1:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 75% 100%); }
.row7.col2:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 68.75% 100%); }
.row7.col3:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); }
.row7.col4:hover ~ .front { clip-path: polygon(53.125% 0%, 100% 0%, 100% 100%, 56.25% 100%); }
.row7.col6:hover ~ .front { clip-path: polygon(46.875% 0%, 100% 0%, 100% 100%, 43.75% 100%); }
.row7.col7:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); }
.row7.col8:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 31.25% 100%); }
.row7.col9:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 25% 100%); }
.row8.col1:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 87.5% 100%); }
.row8.col2:hover ~ .front { clip-path: polygon(64.0625% 0%, 100% 0%, 100% 100%, 78.375% 100%); }
.row8.col3:hover ~ .front { clip-path: polygon(59.375% 0%, 100% 0%, 100% 100%, 68.75% 100%); }
.row8.col4:hover ~ .front { clip-path: polygon(54.6875% 0%, 100% 0%, 100% 100%, 59.375% 100%); }
.row8.col6:hover ~ .front { clip-path: polygon(45.3125% 0%, 100% 0%, 100% 100%, 40.625% 100%); }
.row8.col7:hover ~ .front { clip-path: polygon(40.625% 0%, 100% 0%, 100% 100%, 31.25% 100%); }
.row8.col8:hover ~ .front { clip-path: polygon(35.9375% 0%, 100% 0%, 100% 100%, 21.875% 100%); }
.row8.col9:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 12.5% 100%); }
.row9.col1:hover ~ .front { clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 100% 100%); }
.row9.col2:hover ~ .front { clip-path: polygon(68.75% 0%, 100% 0%, 100% 100%, 87.5% 100%); }
.row9.col3:hover ~ .front { clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 75% 100%); }
.row9.col4:hover ~ .front { clip-path: polygon(56.25% 0%, 100% 0%, 100% 100%, 62.5% 100%); }
.row9.col6:hover ~ .front { clip-path: polygon(43.75% 0%, 100% 0%, 100% 100%, 37.5% 100%); }
.row9.col7:hover ~ .front { clip-path: polygon(37.5% 0%, 100% 0%, 100% 100%, 25% 100%); }
.row9.col8:hover ~ .front { clip-path: polygon(31.25% 0%, 100% 0%, 100% 100%, 12.5% 100%); }
.row9.col9:hover ~ .front { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); }
.col1:hover ~ .back svg,
.col2:hover ~ .back svg,
.col3:hover ~ .back svg,
.col4:hover ~ .back svg,
.left:hover ~ .back svg,
.col6:hover ~ .front svg,
.col7:hover ~ .front svg,
.col8:hover ~ .front svg,
.col9:hover ~ .front svg,
.right:hover ~ .front svg {
opacity: .3;
-webkit-transform: translateX(0);
transform: translateX(0);
}
