使用 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

抱歉没看到你的link...我会在下面留下我之前的回答in-case有人想要这种行为...New fiddle

不要在标题上显示 display:none，而是在您不想显示的项目 (h3, p) 上显示 none。然后在标题上添加悬停 select 它是 children...然后您可以添加任何您想要的动画。

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

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

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

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

首先，您需要在缩略图上添加悬停以显示标题。然后你需要告诉标题中的 h3 隐藏。然后，您 select 悬停的 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; 
}

使用 CSS3 转换缩略图标题

Transform thumbnail caption with CSS3

html

javascript

css

hover

twitter-bootstrap