I've spent a good 30 minutes searching on Stack Overflow for a solution, but I haven't been able to find it yet. It's possible that I'm not sure what exactly to look for.
Essentially, I have a div that contains an image and some text. The objective is for the text to only appear on the image when I hover over it. The HTML and CSS structures are correct, but I am struggling with the JQuery hover function, particularly in terms of how to select the inner div (not just how to use the hover function itself).
What I aim to achieve is that when I hover over an image div (img-container), the corresponding text (hover-img) appears on top of the image.
Here is my code:
HTML
<div id="content" class="col-12">
<!-- Image Gallery -->
<div class="col-lg-4 col-md-6 col-xs-12 img-container">
<img class="img-gal" src="#" />
<div class="hover-img">
<p class="img-text">Text on Hover</p>
</div>
</div>
</div
CSS
.img-container{
float:left;
margin: 0;
padding: 0;
cursor: pointer;
position: relative;
}
.img-gal{
width: 100%;
height: auto;
position: relative;
}
.hover-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
color: #fff;
display: none;
}
.img-text{
text-align: center;
position: relative;
top: 50%;
font-weight: 300;
font-size: 1em;
letter-spacing: 2px;
}
JS
//Hover Image. Need to show the Text when hovering on an image
$('.img-container').hover(function(){
//Stuck here. How to display the text? fadeIn()? But how?
},function(){
//Still stuck. How to hide the text? fadeOut()? But how?
});
Thank you