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

When I hover over the image, I want the fade effect of the overlay to activate. I just started working at my first site and I am a javascript begginer, so I need some help. Here is a jsfiddle.

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

I do not have any javascript code.

我没有任何javascript代码。

2 个解决方案

#1

Inset Css one more Class

插入Css多一个类

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:悬停然后你的页脚颜色更改然后添加hvr-fade然后主要Div悬停的效果

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

Live Demo

#2

You Can do it By css also

你也可以通过css做到这一点

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

#1