You need to do this hover:

enter image description here Link to the picture

Task: the text should appear smoothly, the height of the item should also gradually increase and decrease. The block in which the items themselves lie should not increase when hovering over the item .

Help pliz, I can not continue the project because of this.

  • Attach the code of what you have written. This will help in solving your problem. - Dmitry Goncharov

1 answer 1

How the starting point can come in handy for further study:

html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .wrapper { display: flex; width: 100%; height: 200px; border: 1px solid red; justify-content: space-around; align-items: center; } .block { width: 20%; height: 150px; line-height: 150px; text-align: center; color: transparent; border: 1px solid blue; transition: height 0.5s ease-out 0.5s, color 0.5s ease-out 0.5s, line-height 0.5s ease-out 0.5s; } .block:hover { height: 200px; line-height: 200px; color: black; } 
 <div class="wrapper"> <div class="block">BLOCK #1</div> <div class="block">BLOCK #2</div> <div class="block">BLOCK #3</div> <div class="block">BLOCK #4</div> </div>