css/htmlでマウスオーバー（黒+ボタン+ズームイン）

Question

私はhtml/cssの全く新しい初心者ですが、私は助けが必要です。

私は画像の上にマウスオーバーを作成したい、画像が暗くする必要があり、例：その上に20％の不透明度を持つ黒い四角やボタンがあるはずです「詳しくは」+画像がズームインする必要があります。

既にズームインしてみましたが、毎回フッターが移動していました。マウスを画像上に移動すると、しかし、私のフッタは修正する必要があります。このような何か：

フィドル：https://jsfiddle.net/om0bhvwy/

私は、誰かが私を助けることができる、願っています。 :)

enter code heref 

Answer 1

私はこの例をw3の学校で見つけました。オンラインエディタでも演奏することができます。それは消えますが、暗くしません。

http://www.w3schools.com/css/css_image_transparency.asp

<style> 
    img { 
     opacity: 0.4; 
     filter: alpha(opacity=40); /* For IE8 and earlier */ 
    } 

    img:hover { 
     opacity: 1.0; 
     filter: alpha(opacity=100); /* For IE8 and earlier */ 
    } 
</style> 

Answer 2

画像は、そのサイズの変更をアニメーション化するためにあなたはつもりですか？そうでない場合、これを実現する最も簡単な方法は、ホバーの背景サイズを変更する<div>のような、包含要素の背景画像として画像を使用することです。この<div>には別の<div>が含まれています。これは影として機能し、ホバー上で親を暗くします。

例：

HTML（ベンダープレフィックスなし）

<div class="myPhotoBox"> 
    <div class="shadowBox"> 
    <button class="myButton">More Information</button> 
    </div> 
</div> 

CSS

.myPhotoBox { 
    background-image: url('my-image.jpeg'); 
    background-size:100% auto; 
    background-position:center center; 
    display:block; 
    width:300px; 
    transition: all 0.5s; 
} 
.myPhotoBox:hover { 
    background-size:110% auto; 
} 
.shadowBox { 
    transition: background-color 0.5s; 
    padding: 50px; 
    background-color: transparent; 
} 
.shadowBox:hover { 
    background-color: rgba(0,0,0,0.6); 
} 
.myButton { 
    border: 2px solid white; 
    padding: 6px 12px; 
    text-align: center; 
    color:white; 
    display:block; 
    background-color:rgba(0,0,0,0.5); 
    text-transform: capitalize; 
    margin: 0px auto; 
} 

ここJSfiddleです：https://jsfiddle.net/gxgcj9pa/1/