Wenn ich auf das Bild schweben, will ich das Overlay Hover-Effekt

Question

aktivieren, wenn ich auf das Bild schweben, ich möchte den Fade-Effekt des Overlay zu aktivieren. Ich habe gerade angefangen, an meiner ersten Seite zu arbeiten, und ich bin ein Javascript-Anfänger, also brauche ich etwas Hilfe. Hier ist ein jsfiddle.

HTML-Code:

<div class = "leftpart">  
    <a href="http://www.google.com"> 
     <img src="images/test.jpg"/> 
     <div class="flex-caption hvr-fade">Adventurer Lemon</div> 
    </a> 
</div> 

Ich habe keinen JavaScript-Code.

Answer 1

Inset Css eine weitere Klasse

Ihre Hauptklasse fügen Sie dann Hover-Effekt .leftpart:hover verwenden und dann Ihre Fußzeile Farbwechsel dann hvr-fade nach fügen Sie dann effece der Haupt Div schweben

.leftpart:hover .hvr-fade 
{ 
    background-color: #2098d1; 
    color: white; 
} 

Live Demo

Answer 2

Sie können es tun durch css auch

.leftpart a img:hover{opacity:0.8;}