隐藏说明直到用户将鼠标悬停在图片上？

Question

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 1

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> 

Answer 2

@Allan Empalmado is correct. But you can add CSS transitions to make it flow in and out smoothly, with pure CSS transition property. Add this to the code...

#image_description {
    background-color: #333;
    color: #fff;
    oveflow:hidden;
    -webkit-transition: max-height 0.9s ease;
    -moz-transition: max-height 0.9s ease;
    transition: max-height 0.9s ease;
    max-height:0;
}
#the_image:hover ~ #image_description{
    max-height: 150px; 
}

The -webkit- and -moz- make the CSS cross-browser. it is a simple google search to find other properties you can manipulate with the transition properties.
Hopefully you can find other things you can do to enhance Alans sample code. happy coding !!