Transitions&Transforms - request for help

Question

Could someone of You help me with Transitions&Transforms CSS Module 7 Quiz Question 5/5? I do really not know how to do it...

Answer 1

Transitions are the grease in the wheel of CSS transforms. Without a transition, an element being transformed would change abruptly from one state to another. By applying a transition you can control the change, making it smooth and gradual.😕

Answer 2

<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>

Answer 3

.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;
}

Answer 4

How to solve this task?