Zachary Zachary - 5 months ago 6
HTML Question

Description hidden until user hovers over the image?

I'm looking for some help with this project. I want to be able to hover over the image and this black box pops up with the description in it. Can I get some examples of how I would go about doing this? Thank you all so much for the help!

what I'm looking to do when user hovers over the image for a description

Answer

with pure css you can do something like this

#image_description {
    display: none;
    background-color : #333;
    color : #fff;
    padding  : 50px;
}

#the_image:hover~#image_description{
    display: block;
}
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>

with jQuery you can do something like this

$(document).ready(function(){
$("#the_image").hover(function(){
    $("#image_description").fadeIn();
}, function(){
$("#image_description").fadeOut();
});
});
#image_description { display : none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>

Comments