どのように私はお互いに2つのdivsを作るのですか

Question

どうすればこのようなdivを作るのですか？ https://i.gyazo.com/cc34cdba5d8ef4969212c45935caf165.png その1 div、画像（車）と背景がテキストで黒色になっています。そしてあなたが動かすと、赤い褪色が消えてしまいます。 これは私がやろうとしていることの完全なgyazoです。 https://i.gyazo.com/51d360e8f4a6408dbed789f0d702dbc7.png

ここに車の写真があります：3つ以上のリンクを投稿するには少なくとも10人の担当者が必要です。リンクはコメントに入れてください。

はこのようにそれを取って、黒という名前の1のdivを作る：それは黒い背景を持って

<div class="black"> 
<img src="urltocar" height="x" width="x"> 
</div> 

は車そのものより大きく得るために黒のdivをスタイル付き私が試した何

しかし、それは決して働かなかった。

Answer 1

ここでは、メリークリスマスを行く：https://jsfiddle.net/s2moc0gt/1/

基本的にはちょうどいくつかのCSS：

.img-container { 
    width: 200px; 
    height: 200px; 
    background-image: url("https://rocket-league.com/content/media/items/avatar/220px/75e8bb7e5d1473412157.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.red-overlay { 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(transparent, red); 
} 

.red-overlay:hover { 
    opacity: 0; 
}