Пишем код HTML:
Пишем стиль CSS:
Придаем динамику:
Смотрим наш результат:
HTML:
<div class="frame">
<div class="figures">
<figure class="fig-1"></figure>
<figure class="fig-2"></figure>
<figure class="fig-3"></figure>
<figure class="fig-4"></figure>
<figure class="fig-5"></figure>
<figure class="fig-6"></figure>
<figure class="fig-7"></figure>
<figure class="fig-8"></figure>
<figure class="fig-9"></figure>
</div>
</div>
SCSS:
* {
box-sizing:border-box;
margin:0;
padding:0;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: linen;
color: #333;
display:flex;
justify-content:center;
align-items:center;
}
.figures {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 4px;
figure {
margin:0;
background-size: cover;
transform:scale(1);
height: 125px;
width: 125px;
cursor:pointer;
position:relative;
z-index:1;
opacity:1;
transition: transform 1s, z-index 0s 1s, opacity 0.5s 0.3s ease-in;
&.hide {
opacity:0;
transition: opacity 2s ease-out;
}
&.expand {
transform:scale(3.1);
z-index:10;
transition: transform 2s;
background-position: center;
}
&.fig-1 {
background-image: url("https://source.unsplash.com/tsyi6U1quiI");
transform-origin: 0 0;
}
&.fig-2 {
background-image: url("https://source.unsplash.com/FgTcokJpm9w");
transform-origin: 50% 0;
background-position: top center;
}
&.fig-3 {
background-image: url("https://source.unsplash.com/fT6-YkB0nfg");
transform-origin: 100% 0;
background-position: bottom center;
}
&.fig-4 {
background-image: url("https://source.unsplash.com/ju5tx5zl_as");
transform-origin: 0 50%;
background-position: center bottom;
}
&.fig-5 {
background-image: url("https://source.unsplash.com/qK1Oc5mt4Bg");
transform-origin: 50% 50%;
background-position: top center;
}
&.fig-6 {
background-image: url("https://source.unsplash.com/8pK37xtN4bo");
transform-origin: 100% 50%;
}
&.fig-7 {
background-image: url("https://source.unsplash.com/a8yLl6hpVnA");
transform-origin: 0 100%;
background-position: center;
}
&.fig-8 {
background-image: url("https://source.unsplash.com/W2zipE1V-iQ");
transform-origin: 50% 100%;
}
&.fig-9 {
background-image: url("https://source.unsplash.com/kV3yiegGJUQ");
transform-origin: 100% 100%;
}
}
}
JavaScript:
$(function(){
$('figure').click(function(){
$('figure').toggleClass('hide');
$(this).removeClass('hide').toggleClass('expand');
});
});