Wirkung für Bild mit der Maus darüber

Question

sieht folgendermaßen aus:

Wenn der Zeiger auf dem Bild mag ich eine kleine dunkele rect am unteren Rande dieses Bildes mit etwas Text. Wie kann ich das machen? Vielleicht mit jquery?

Danke Jungs.

Answer 1

Ja, Sie können leicht jquery verwenden, um das zu erreichen. Wenn Sie den gesamten Prozess lernen wollen und tun es sich, einen Blick auf diese - Sliding Boxes and Captions with jQuery Oder einen Blick auf ein paar Plugins, um die gleiche Wirkung zu erzielen - 10 Stylish jQuery caption plugins

Answer 2

Sie können so viele Wege erreichen. Abhängig von der Struktur Ihrer Seite können Sie dies mit ein paar CSS-Klassen erreichen.

HTML:

<div class="image_hover"><span>Text</span></div> 

CSS:

.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; } 
.image_hover span { display: none; } 
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; } 

Sie würden einige Updates vornehmen müssen auf der Grundlage Ihrer besonderen Situation. Hier ist eine working example auf jsbin. Diese Lösung blendet den Text standardmäßig aus, und wenn der Benutzer über das div-Steuerelement fährt, bewirkt die Hover-Klasse, dass der Text angezeigt wird.

Sie können auch jQuery verwenden, um das div onmouseover hinzuzufügen oder anzuzeigen.