Hi James, We understand that you are facing an issue with your code that is not leading to the perfect positioning of the hover code. We are sending you the code that would let you have a clearer view. Here we are: Html code:
<div class="hovercard-container"> <img src="img.png" class="image"> <div class="hover-card"> <div class="hover-text">text</div> </div> </div>
css code: hovercard-container { position: relative; } .hover-card{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .6s ease; background-color: red; }
.container:hover .hover-card { opacity: 1; }
.hover-text { color: white; position: absolute; top: 50%; left: 50%; text-align: center; }
Apart from this, you may also consider going through this detailed article on CSS hover effects( proglobalbusinesssolutions.com/css-hover-effects ). Do get back to us if you have any query.