Hello! My task is to create a layer that “hits” the image on hover. I tried to do it with CSS:

.container { position: relative; width: 100%; max-width: 1150px; margin: 0 auto; box-sizing: border-box; } .border { overflow: hidden; position: absolute; } .border>img { width: 100%; } .border:hover .cover { margin-left: 0; } .cover { position: absolute; margin-left: -100%; margin-top: 0; width: 100%; height: 100%; background-color: rgba(37, 33, 33, 0.3); transition: margin-left 0.3s; } .cover table { height: 100%; } 
 <div class="container"> <div class="border"> <div class="cover"> <table align="center"> <tr> <td> <button>OK</button> </td> </tr> </table> </div> <img src="https://s1.it.atcdn.net/wp-content/uploads/2015/11/shutterstock_279572969.jpg" alt=""> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, expedita deserunt ab obcaecati repudiandae quasi aut illo in odit necessitatibus perferendis provident temporibus mollitia placeat.</p> </div>

The problem is that the outer frame (border) is position: absolute , and because of this, the subsequent elements fall under the picture.

And if absolute removed, then the layer that is outside the frame becomes visible. It does not suit me to set the exact dimensions of the frame, since the frame should adjust to the size of the container along with the picture.

Can this be done using CSS, or do I need to connect JavaScript / jQuery? Thank you very much in advance!

There will be several pictures, and different sizes. Something like this Turkish site: link

  • .border change position to relative and you will be happy) - Eugene Nikolaev

1 answer 1

I’m already starting to be nagged with interest in this particular topic, for one day I’m doing the same thing the same time but in different ways.

sandbox

look at the whole screen

 .items { display: flex; flex-wrap: wrap; align-items: flex-start } .item { border: 1px solid #000; display: inline-block; margin: 4px; position: relative; overflow: hidden; } img { display: block; } .hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.5); transform: translateX(-100%); opacity: 0; visibility: hidden; transition: 0.34s; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hidden p { text-align: left; } .item:hover .hidden { opacity: 1; visibility: visible; transform: translateX(0); } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="items"> <div class="item"> <div class="view"> <img src="http://placehold.it/140x230" alt=""> </div> <div class="hidden"> <div> <a href=""><i class="fa fa-link" aria-hidden="true"></i></a> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p> </div> </div> <!--item--> <div class="item"> <div class="view"> <img src="http://placehold.it/200x230" alt=""> </div> <div class="hidden"> <div> <a href=""><i class="fa fa-link" aria-hidden="true"></i></a> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p> </div> </div> <!--item--> <div class="item"> <div class="view"> <img src="http://placehold.it/340x130" alt=""> </div> <div class="hidden"> <div> <a href=""><i class="fa fa-link" aria-hidden="true"></i></a> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p> </div> </div> <!--item--> <div class="item"> <div class="view"> <img src="http://placehold.it/200x200" alt=""> </div> <div class="hidden"> <div> <a href=""><i class="fa fa-link" aria-hidden="true"></i></a> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p> </div> </div> <!--item--> </div> <!--items-->

  • Aaaaaaaaaaaaaaaaaaa !!!!!!!!!!))))))))))))))))) - kiten
  • Thanks !!!!!!!!!!!))))))))))))))
  • thumbs up and mark the decision - MaximLensky