Wella.comのようにdiv要素にホバーグラデーションを作る方法は？

Question

div要素に勾配ホバー効果を作成する必要があります（例：http://www.wella.com/professional/en-UK/home）

どうすればいいですか？ jQueryやCSSを使う方が良いですか？ Chromeデベロッパーツールを使用して見つけようとしていましたが、無駄でした。どうか、誰か助けてくれますか？

おかげ

Answer 1

EDIT：としては、あなたが上にグラデーション効果を持つBG-イメージを持っていると思ったコメント。だから、使用して：あなたは実際には異なるクラスをターゲットにすることができますホバー、それはこのように行くだろう：

チェックupdated fiddle

更新CSS：

.hoverable { 
    width: 80%; 
    height: 50vh; 
    background-image: url('http://media.wella.com/professional/m/_master/homepage/Home%20Gallery%20Item/for-all-latest-news_d.jpg'); 
    background-size: contain; 
} 

.hoverable:hover .content { 
    background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
} 

---

CSSは、おそらくあなたの最良の選択です、 cssの：hoverイベントをキャッチして、希望の勾配をdivに適用することができます。

の詳細情報を確認this Fiddleが、それはこのように書きます：

.hoverable { 
 
    width: 80%; 
 
    height: 50vh; 
 
} 
 
.hoverable:hover { 
 
    background: -webkit-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: -moz-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: -o-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
    background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%); 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    color: black; 
 
}

<div class="hoverable"> 
 

 
    <div class="content"> 
 
    Really nice in here 
 
    </div> 
 
</div>

はそれが役に立てば幸い！ 乾杯。

Answer 2

これはすばらしい質問です。理論的な答えが最初にあり、次にあなたの質問に対する具体的な答えがあります。 通常、CSSのデザイン変更を保存したいと考えています。 Javascript（jQueryはjavascriptライブラリ）を維持しながら、機能性に重点を置いています。

ホバー効果をより具体的には、参照したウェブサイトでどのようにしたのかよく分かりませんが、単にdivのグラデーションオーバーレイを切り替えるだけの場合は、 CSS疑似セレクタをホバーします。それは、簡単なクリーンであり、それはhttp://caniuse.com/#feat=css-sel2

あなたのCSSはこの

div:hover { 
    background: linear-gradient(...); //Add all vendor prefixes 
    transition 3s; //Add all vendor prefixes 
} 

は偉大な一日を次のようになり、これらのブラウザのすべてで動作します！