Question

我正在研究我的投资组合，并为我的图像缩略图做了一些奇特的事情。我现在希望我的悬停标题在悬停时淡入/淡出。

这是我的代码到目前为止; HTML：

<a href="1.jpg" class="mask"><img src="1.jpg" />
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </a>

CSS：

    .mask {
    position:relative;
    height:180px;
    width:240px;
    -webkit-box-shadow:0 0 1px #000;
    border:5px solid #f6f6f6;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask img {
    position:absolute;
    height:300px;
    width:400px;
    -webkit-transform: rotate(15deg);
    -moz-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg);
    top:50%;
    left:50%;
    margin-top:-150px; /* half the height */
    margin-left:-200px; /*half the width */
}

.mask:last-child {
    margin-right:0px;
}

.mask .caption {  
    background-color: rgba(222,169,188,0.9);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    left: 0;  
}  

.mask .fade-caption {  
    opacity: 0;  
    width: 220px;  
    height: 180px;  
    text-align: left;  
    padding: 4px 20px 4px 15px; 
    display:none; 
    font-size:0.8em;
}  

.mask:hover .fade-caption {  
    opacity: 1;  
    display:inline;
      width: 220px;  
        height: 180px;
-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
    }

我认为我需要添加一个淡入淡出字幕类并将转换放在：悬停状态，但显然这是不对的。我还没有熟练掌握过渡，我希望有人可以帮我解决这个问题，因为我找不到可以帮助解决问题的教程。

Answer 1

你非常接近。查看this fiddle以获取有效工作示例。完整的CSS下面：

.mask {
    position:relative;
    height:180px;
    width:240px;
    box-shadow:0 0 1px #000;
    border:5px solid #f6f6f6;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask img {
    position:absolute;
    height:300px;
    width:400px;
    top:50%;
    left:50%;
    margin-top:-150px; /* half the height */
    margin-left:-200px; /*half the width */
    -webkit-transform: rotate(15deg);
    -moz-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg);
}

.caption {  
    background-color: rgba(222,169,188,0.9);  
    position: absolute;  
    color: #fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; 
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    opacity: 0;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
}  

.mask:hover .caption {  
    opacity: 1;  
}

重要的是，transition样式位于元素本身，而不仅仅是:hover状态。这样它就会淡出和淡出。如果这些样式仅在:hover上，则该元素将淡入但立即消失而不是淡出。

您无法在display: none和display: block/whatever之间进行转换。因此，您需要让此实例中的opacity成为视觉上隐藏字幕的内容。您可以添加专有的ms-filters以获得旧的IE支持。

其他注意事项：

为了简单起见，我整合了您的.caption和.fade-caption课程。
无需重新声明已为:hover状态设置的内容，您只需说明需要更改的内容。
box-shadow不再需要前缀，只需使用最终版本。
您对定位标题感到有点困惑，将其设为absolute，同时设置了width和height。为简单起见，我将所有四个值设置为0。
您无需在此声明z-index，只需让浏览器的正常堆叠顺序为您排序即可。如果您需要将标题放在标记中的图像之前，则需要将其添加回来。

Answer 2

您的转换不符合预期的原因是标题上的display属性（从none转到inline）阻止了{{1转换时，您的转换也应该在进行任何更改之前应用于元素（即在悬停之前 - 处于常规状态）。纯粹依靠opacity来淡化标题，应该是一种享受：

opacity

http://jsfiddle.net/g9NFV/

编辑：Ninja'd，但我现在仍然会在这里保留这个答案。

在css中悬停时淡出图像标题

2 个答案: