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'）使视图按钮可见;和动画它的左侧属性为mouseleave做反向。

http://api.jquery.com/animate/ 这将工作在6：）

画廊悬停效果与按钮

2 个答案: