John Omoke• 240
@jomoke814
Posted
Hello, @Snorri967 the best way to solve your problem will be to wrap your image that's equilibrium-view and equilibrium-image to one div like so:
<div class="image-equil"> <img src="images/image-equilibrium.jpg" alt=""> <div class="img-overlay"> <img src="images/icon-view.svg" alt="" class="eye"> </div> </div> then you apply this CSS style: .image-equil { position: relative; } .img-overlay { display: none; background: hsl(178, 100%, 50%, 0.5); border-radius: 10px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .img-overlay .eye { position: absolute; top: 40%; left: 40%; width: 50px; } .image-equil img { display: block; border-radius: 10px; object-fit: cover; width: 100%; } .image-equil:hover .img-overlay { display: block; cursor: pointer; } I hope this helps you and remember to apply the style according to how you have named your elements.Marked as helpful
1
Tony• 50
@Snorri967
Posted
@jomoke814 Thanks man, I really should of thought of that to be honest as I read on stackoverflow earlier that day about setting the position of the either the overlay relative the image, but thanks I will use this in future!
0
