html - ボタンによるギャラリー ホバー効果

Question

ここのような同様の効果を得るにはどうすればよいですか: http://www.holajose.com/

つまり、ホバーすると画像ボタン（表示）が表示されます。

Answer 1

http://www.holajose.com/styles.cssから

.overlay .view_button {
position: absolute;
left: 0;
top: 102px;
opacity: 0;
height: 16px;
width: 32px;

border: 1px solid rgba(69,76,197,.63);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #5b63d9;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.11), inset 0 1px 1px rgba(255,255,255,.27);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.11), inset 0 1px 1px rgba(255,255,255,.27);
box-shadow: 0 2px 2px rgba(0,0,0,.11), inset 0 1px 1px rgba(255,255,255,.27);

font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: white;
padding: 15px 25px;
text-shadow: 0 1px 1px rgba(51,58,168,.47);
display: block;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.overlay:hover .view_button {
left: 76px;
opacity: 1;
}

Answer 2

IE 8 で holajose を開くと、これらの Webkit トランジションが機能しません。

ラッパー クラスにバインドされた JQuery の onmouseenter および onmouseleave イベントを作成することをお勧めします。不透明度を.7程度にアニメーション化するだけで、ビューボタンが.attr('style','display:block');で表示されるようになります。左のプロパティをアニメーション化し、マウスリーブの逆を行います。

http://api.jquery.com/animate/ IE 6で動作します:)