This as SASS
figure
margin-bottom: 20px
position: relative
opacity: 0
transform: translateX(20px)
transition: all 0.3s ease-in-out
overflow: hidden
cursor: pointer
&.is-showing
opacity: 1
transform: translateX(0px)
img
display: block
transform: scale(1)
transition: all 0.3s ease-in-out
&:hover
figcaption
left: 0%
img
transform: scale(1.1)
compiles to this CSS
figure {
margin-bottom: 20px;
position: relative;
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease-in-out;
overflow: hidden;
cursor: pointer;
}
figure.is-showing {
opacity: 1;
transform: translateX(0px);
}
figure img {
display: block;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
figure:hover figcaption {
left: 0%;
}
figure:hover img {
transform: scale(1.1);
}
Which is this in SCSS
figure {
margin-bottom: 20px;
position: relative;
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease-in-out;
overflow: hidden;
cursor: pointer;
&.is-showing {
opacity: 1;
transform: translateX(0px);
}
img {
display: block;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
&:hover {
figcaption {
left: 0%;
}
img {
transform: scale(1.1);
}
}
}
Use SASSMeister to test.
