Here is a sample that I'm working with:
HTML CODE:
SED PERSPICIATIS
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
<div class="col-md-4 tab-bottom">
<div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
<div class="tab-bottom-content">
<div>
<p class="title_bottom">SED PERSPICIATIS</p>
<p class="content_bottom"></p><p>
Sed ut perspiciatis unde omnis iste natus error sit<br>
voluptatem accusantium doloremque laudantium,<br>
totam rem aperiam, eaque ipsa quae ab illo inventore<br>
veritatis et quasi architecto beatae vitae dicta sunt<br>
explicabo.
</p>
<p></p>
</div>
</div>
</div>
<div class="col-md-4 tab-bottom"gt;
<div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
<div class="tab-bottom-content">
<div>
<p class="title_bottom">SED PERSPICIATIS</p>
<p class="content_bottom"></p><p>
Sed ut perspiciatis unde omnis iste natus error sit<br>
voluptatem accusantium doloremque laudantium,<br>
totam rem aperiam, eaque ipsa quae ab illo inventore<br>
veritatis et quasi architecto beatae vitae dicta sunt<br>
explicabo.
</p>
<p></p>
</div>
</div>
</div>
CSS CODE:
.col-md-4 {
width: 33.33333333%;
}
.tab-bottom {
position: relative;
height: 400px;
float:left;
}
.tab-bottom-img {
width: 100%;
position: absolute;
top: 50%;
height: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
.tab-bottom-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JS CODE:
$(".tab-bottom").bind('mouseover',function(event){
$(this).find("tab-bottom-content").css("display", "block");
});
$('.tab-bottom-img').bind('mouseleave', function(e) {
});
I want the text in the div tab-bottom-content to be displayed only when the mouse is over.
I have tried using the script above but unfortunately it is not working as expected
Can anyone help me solve this issue?
Thank you in advance!