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

Question

当我将鼠标悬停在图像上时，我想要激活叠加层的淡入淡出效果。我刚刚开始在我的第一个网站工作，我是一个javascript begginer，所以我需要一些帮助。这是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

  

您的主类添加悬停效果，然后使用.leftpart:hover然后   然后在添加hvr-fade然后添加主要内容后，您的页脚颜色会发生变化   Div hover

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

Live Demo

Answer 2

你也可以通过css

来做到这一点

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