CSS3 transition & CSS3 transform
HTML
<div class="wrap">
<div class="container">
<h1>Without transition</p>
<div class="box1 box"></div>
</div>
<div class="container">
<h1>With transition</p>
<div class="box2 box"></div>
</div>
</div>
SCSS
.wrap {
margin: 50px;
}
.container {
display: inline-block;
width: 300px;
}
h1 {
color: lightgray;
font-family: lato;
font-size: 20px;
font-weight: 200;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
.box {
border-radius: 5px;
height: 40px;
margin: 50px auto;
width: 80px;
.wrap:hover & {
transform: scale(2);
}
}
.box1 {
background: mediumturquoise;
}
.box2 {
background: #2b3f53;
transition: all 1s;
}