Beschreibung ausgeblendet, bis der Benutzer das Bild überfliegt?

Question

Ich suche etwas Hilfe mit diesem Projekt. Ich möchte in der Lage sein, über das Bild zu schweben und diese Black Box erscheint mit der Beschreibung darin. Kann ich Beispiele dafür bekommen, wie ich das machen würde? Vielen Dank für die Hilfe!

, was ich suche zu tun, wenn der Benutzer für eine Beschreibung über das Bild schwebt

Answer 1

mit reinem CSS Sie so etwas wie dieses

#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>

tun können

mit jQuery können Sie so etwas tun

$(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 ist richtig. Sie können jedoch CSS-Übergänge hinzufügen, um sie fließend ein- und auszublenden, mit reinen CSS-Übergangseigenschaften. Fügen Sie diese auf den 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; 
} 

Die -webkit- und -moz- die CSS-Cross-Browser zu machen. Es ist eine einfache Google-Suche, um andere Eigenschaften zu finden, die Sie mit den Übergangseigenschaften bearbeiten können.
Hoffentlich können Sie andere Dinge finden, die Sie tun können, um Alans Beispielcode zu verbessern. fröhliche Codierung !!