I have been trying to create a hover card effect, but I am facing some problems. When someone hovers an image, a detailed view should appear below/above my cursor position (depending on how much space is available). I have the following code :
$('.prof-image').hover(function(){
var pos = $(this).offset();
$('#hover-card').css({
'top': pos.top + 30 + 'px',
'left': pos.left - 100 + 'px'
});
});But this code doesn't position the hover card correctly once I scroll down the page and hover on a particular image. What's the best way to implement this? Any suggestions/modifications will be highly appreciated!
Also if there is a plugin that handles all these please suggest.
Many Thanks!
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.
Robert van der Elst
Front End Designer
Hmmm, you could let the hover-card be positioned based on the image, if you put the hover-card element inside the element which holds the image, something like this:
If you give <figure> a position: relative, then you can place position: absolute on the hover-card. If you need a codepen, let me know :)