Seeking assistance in creating an interactive infobox that appears when hovering over a related image. Currently, the infobox pops out and flashes, but there is a problem where it shifts away from the image during the hover.
I attempted to only display the infobox when hovering over the image using .mouseenter and FadeIn instead of fadeToggle. However, I encountered a bug that causes the infobox to appear every other time the image is hovered over.
Here's my code (includes NodeJS - EJS extension):
HTML:
<section class="campview">
<h1>Most Popular Campgrounds</h1>
<hr>
<div class="container-fluid">
<div class="row">
<% for(var i=0 ; i<4 ; i++){ %>
<div class="col-xs-12 col-sm-3">
<img src="<%=campgrounds[i].image%>" class="image-responsive img-rounded animated fadeIn">
<div class="infopop">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h3><%=campgrounds[i].name%> </h3>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-sm-7">
<p class="vert-center"><%= campgrounds[i].description.slice(0,100)+"..." %></p>
</div>
<div class="col-xs-5 col-sm-5">
<a href="/campgrounds/<%=campgrounds[i]._id%>" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<% }; %>
</div>
<div class="row">
<div class="col-xs-12">
<a class="pull-right" href="/campgrounds">View all campgrounds</a>
</div>
</div>
</div>
</section>
CSS:
.infopop{
display: none;
z-index: 1;
position: absolute;
top: 57%;
width: 92.8%;
height: 40%;
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0)),
to(rgba(50,50,50,0.8)), color-stop(.3,#000)
);
}
Jquery:
$(document).ready(function() {
$(".campview img").hover(function(event){
$(this).next().fadeToggle("fast");
});
});
Your understanding and guidance would be greatly appreciated! Thanks!