There are blocks inside the container: one link, the second content. How to make it so that when you hover over a link, it smoothly transforms into content, and when you remove italics, content smoothly goes back to the link? Preferably without js

<div class="container"> <div class="link" style="background-color:red;width:200px;height:100px;"></div> <div class="content" style="background-color:green;width:200px;height:300px;"></div> </div>
  • smoothly transformed into content - what is meant here? - Grundy

3 answers 3

 .container { position: relative; } .link { position: absolute; top: 0; left: 0; background: red; width: 200px; height: 100px; z-index: 2; } .content { position: absolute; top: 0; left: 0; background: green; width: 200px; height: 300px; z-index: 1; opacity: 0; transition: 0.5s; cursor: pointer; } .link:hover + .content{ opacity: 1; transition-timing-function: linear; transition: 3.5s; z-index: 3; } .link:not(:hover) + .content{ opacity: 0; transition-timing-function: linear; transition: 3.5s; z-index: 1; } 
 <div class="container"> <div class="link"></div> <div class="content"></div> </div>

  • Need to work only when you hover on the red block - Artur Han
  • Now, when you hover over the red block, it becomes green, and when you move the cursor to the side, it turns into red again. Need to stay green? - Fox Alice
  • If so, then not to do without JS. - Yuri
  • You try to point a little below the red block and see what the problem is - Artur Han
  • Bug fixed, check. - Fox Alice

Only if you correct the markup, you can achieve the desired behavior of the blocks:

 .link { background-color: red; width: 200px; min-height: 100px; } .content { background-color: green; width: 200px; height: 100px; opacity: 0; transition: all .5s ease; } .link:hover>.content { height: 300px; opacity: 1; } 
 <div class="container"> <div class="link"> <div class="content"></div> </div> </div>

You can try to manipulate the blocks using z-index :

 .container { position: relative; } .link { position: absolute; z-index: 1; top: 0; left: 0; background-color: red; width: 200px; height: 100px; transition: all .6s ease; } .content { position: absolute; top: 0; left: 0; background-color: green; width: 200px; height: 100px; opacity: 0; transition: all .5s ease; } .link:hover { height: 300px; opacity: 0; } .link:hover+.content { height: 300px; opacity: 1; } 
 <div class="container"> <div class="link"></div> <div class="content"></div> </div>

Alternatively, just change the transparency and height:

 .container { position: relative; } .link { position: absolute; top: 0; left: 0; background-color: red; width: 200px; height: 100px; transition: all .6s ease; } .content { position: absolute; top: 0; left: 0; background-color: red; width: 200px; height: 100px; opacity: 0; transition: all .5s ease; } .content:hover { height: 300px; opacity: 1; background-color: green; } 
 <div class="container"> <div class="link"></div> <div class="content"></div> </div>

  • Not good, the markup is needed exactly the one that already exists. Is there no solution, at least using js? - Artur Han
  • @ArturHan using JS, everything is possible to do. But the approach itself is wrong. This is how to wear pants over your head)) - UModeL

 .container { position: relative; } .link { position: absolute; top: 0; left: 0; background: red; width: 200px; height: 100px; z-index: 1; } .content { position: absolute; top: 0; left: 0; background: green; width: 200px; height: 100px; z-index: 2; opacity: 0; transition: 0.5s; cursor: pointer; } .content:hover { opacity: 1; transition: 0.5s; } 
 <div class="container"> <div class="link"></div> <div class="content"></div> </div>

  • It is necessary not to change the transparency, namely, to replace the block with another, since they have different heights, if you carefully watched the question - Artur Han
  • @ArturHan, you then correct the question and describe in more detail how and what you tried to implement, if there is no such, at least describe the desired result in more detail. There are no fortune-tellers here ... How to understand, Как сделать,чтобы при наведении на link, он плавно трансформировался в контент, - Air
  • one
    you have prescribed the same height of the blocks in the styles, but my question already has a different height! With different block heights, your code will not work - Artur Han
  • Sori, did not look through the height of the block. However, it will still work, only not as it should be, apparently ... And how should you? - Yuri
  • It is necessary that when you hover clearly on the block, it transformed, and with your code at different heights, it will turn blue already when hovering below, since the blue block is larger in height - Artur Han