Question

我使用一些相当简单的CSS来悬停显示更大的图像。这是HTML结构：

<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>

这是CSS：

.Enlarge {
position:relative;
}    
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}    
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}    
div.Enlarge:hover span{ 
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}

但是，我想为较大的图像添加一个缓入/退出效果。我无法解决这个问题。如果我将过渡应用于，则图像将从左侧滑入。这不是我想要的。如果我将效果应用于图像，则无效。

以下是示例：Example

提前感谢您的意见！

Answer 1

使用可见性和不透明度可以实现淡入淡出效果。

JSFiddle Demo

添加以下样式：

.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}

div.Enlarge:hover span {
    visibility: visible;
    opacity: 1;
    /* rest of your styles below */

用css轻松悬停图片

1 个答案: