@christaelrod
Senior Graphic Designer & Web Developer at Proglobalbusinesssolutions.
Creative graphic and web designer at PGBS, passionate about designing interfaces& multimedia design with strong skills. My expertise also includes bug fixing, troubleshooting, designing front and back end web site designs using HTML5, CSS3, PHP, JS and more.
N/A
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( http://www.proglobalbusinesssolutions.com/css-hover-effects/ ). Do get back to us if you have any query.