2

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

到目前为止，这是我的代码；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 状态，但显然这是不对的。我对转换还不是很熟练，我希望有人可以帮助我，因为我找不到可以帮助我解决问题的教程。

4

2 回答 2

2

You were pretty close. Check out this fiddle for a working example. Full CSS below:

.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;  
}

Importantly, the transition styling is on the element itself, not just its :hover state. That way it will both fade in and out. If those style are just on :hover, the element will fade in but disappear immediately rather than fading out.

You can't transition between display: none and display: block/whatever. So, you need to let the opacity in this instance be what visually hides your caption. You could add the proprietary ms-filters to get old-IE support.

Other points to note:

  1. I consolidated your .caption and .fade-caption classes for the sake of simplicity.
  2. There's no need to re-declare things that are already set for the :hover state, you just need to state those things that need to change.
  3. There's no need for prefixes on box-shadow any more, just use the final version.
  4. You were getting a bit confused with positioning your caption, making it absolute but also setting a width and height. For simplicity's sake I have just set all four valules to 0.
  5. You don't need to declare the z-index here, just let the browser's normal stacking order sort it for you. If you need to place the caption before the image in the markup though, you would need to add this back in.
于 2013-04-12T10:28:54.347 回答
1

您的转换不是当前执行您可能期望的那样的原因是标题上的display属性（从noneto ）阻止转换，并且您的转换也应该在您进行任何更改之前应用于元素（即之前悬停 - 处于常规状态）。纯粹依靠来淡入淡出标题应该是一种享受：inlineopacityopacity

.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/

编辑：忍者，但我现在还是把这个答案留在这里。

于 2013-04-12T10:31:19.440 回答