当我将鼠标悬停在图像上时，我希望激活叠加悬停效果

Question

当我将鼠标悬停在图像上时，我想要激活覆盖的淡入淡出效果。我刚开始在我的第一个站点工作，我是 javascript 初学者，所以我需要一些帮助。这里有一个jsfiddle.

HTML代码：

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

我没有任何 javascript 代码。

Answer 1

再插入Css一个Class

Your Main Class add Hover Effect then use .leftpart:hover and then your footer color change then after add hvr-fade then effece of main Div hover

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

Live Demo

Answer 2

你也可以css

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