使用 CSS3 转换缩略图标题

Question

我知道如何在缩略图上单独创建简单的标题和悬停标题，但是如何一起做，就像缩略图上有一个简单的标题，当它悬停时显示详细标题

HTML

    <div class="row">
      <div class="col-sm-4">
        <div class="thumbnail">
          <div class="caption">
            <h2>Simple Caption</h2>
            <h3>detail caption</h3>
            <hr>
            <p><a class="btn btn-default" role="button">Shop Now</a></p>
          </div>
          <img src="one.jpg" alt="one">
       </div>
     </div>
   </div>

CSS

.caption {
   position:absolute;
   top:0;
   right:0;
   left:0;
   bottom:0;
   background:rgba( 235,235,235, 0.91) ;
   color:#5B5E5E !important;
   text-align:center;
   width:350px;
   height:600px;
   padding:150px;
   display:none;
 }

h2 应该在悬停之前显示为缩略图标题。

但当悬停时，它应该显示 h2 以及 h3 和 p。

这里是link，它显示NICE LILY。我想像这样转换标题。

我怎样才能做到这一点。

任何帮助将不胜感激。

Answer 1

抱歉没有看到你的链接...如果有人想要这种行为，我会在下面留下我之前的答案...New fiddle

不要在标题上显示：无，而是在您不想显示的项目上显示无（h3，p）。然后将悬停添加到标题并选择它的子项...然后您可以添加任何您想要的动画。

.thumbnail { 
    position:relative; 
}

.thumbnail:hover .caption {
    display:block;
}
.caption {
   position:absolute;
   top:0;
   right:0;
   left:0;
   bottom:0;
   color:#5B5E5E !important;
   text-align:center;
   width:350px;
   height:600px;
   padding:150px;
   display:block;
}

.caption h3, .caption p {
    display:none;
}

.caption:hover {
    background:rgba( 235,235,235, 0.91) ;
}
.caption:hover h3, .caption:hover p {
    display:block;
}

这就是我假设你想要发生的事情......

1. 用户将鼠标悬停在图片上并查看简单标题 (h2)
2. 然后用户将鼠标悬停在 h2 上并显示详细标题 (h3)

我有一个 jsfiddle，您可以在其中看到示例...enter link description here

首先，您需要在缩略图中添加悬停以显示标题。然后你需要告诉标题中的 h3 隐藏。然后选择悬停的 h2 和它的兄弟 h3 并在其上显示。请注意，这不适用于早期版本的 Internet Explorer。最后，这就是你的 CSS 的样子......

.thumbnail { 
    position:relative; 
}

.thumbnail:hover .caption {
    display:block;
}
.caption {
   position:absolute;
   top:0;
   right:0;
   left:0;
   bottom:0;
   background:rgba( 235,235,235, 0.91) ;
   color:#5B5E5E !important;
   text-align:center;
   width:350px;
   height:600px;
   padding:150px;
   display:none;
 }

.caption h3 {
    display:none 
}

.caption h2:hover + h3 {
    display:block; 
}