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

Posted 2023-05-08

【中文标题】在 css 中悬停时淡化图像标题

【英文标题】：Fading image captions on hover in css

【发布时间】：2013-04-04 19:37:27

【问题描述】：

我正在处理我的作品集，我对我的图像缩略图做了一些花哨的事情。我现在希望悬停标题在悬停时淡入/淡出。

这是我目前的代码； 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;   
      

我认为我需要添加一个淡入淡出标题类并将转换置于 :hover 状态，但显然这是不对的。我对转换还不是很熟练，我希望有人可以帮助我，因为我找不到可以帮助我解决问题的教程。

【参考方案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，让浏览器正常的堆叠顺序为你排序即可。如果您需要在标记中的图像之前放置标题，则需要重新添加。

【参考方案2】：

您的转换没​​有按照您的预期进行的原因是标题上的display 属性（从none 到inline）阻止opacity 转换，并且您的转换在您进行任何更改之前（即在悬停之前 - 处于常规状态），也应该将其应用于元素。完全依靠opacity 淡入淡出标题应该是一种享受：

.mask .fade-caption   
    opacity: 0;  
    width: 220px;  
    height: 180px;  
    text-align: left;  
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    -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 .fade-caption   
    opacity: 1;  
    width: 220px;  
    height: 180px;

http://jsfiddle.net/g9NFV/

编辑：Ninja'd，但我暂时将这个答案保留在这里。