html - 带有按钮的画廊悬停效果

Question

我如何获得类似的效果：http: //www.holajose.com/

我的意思是，当您将鼠标悬停时，会出现图像按钮（视图）。

Answer 1

open holajose in IE 8 those webkit transitions wont work.

I would suggest creating a JQuery onmouseenter and onmouseleave event binded to the wrapper class. the just animate the opacity to .7 or so make the view button visible with .attr('style','display:block'); and animate its left property do the reverse for mouseleave.

http://api.jquery.com/animate/ that will work in ie 6 :)

Answer 2

来自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;
}