画像の上にマウスを移動すると、オーバーレイホバー効果が有効になります。

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 1つの以上のクラス

あなたのメイン・クラスはホバーエフェクトを追加し、メイン 本部のhvr-fade、その後effeceが

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

をホバー追加した後、あなたのフッターの色の変化を .leftpart:hoverを使用して、

Live Demo

Answer 2

あなたもそれを行うことができますによっても

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