CSS3图文卡片鼠标hover悬停动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款CSS3图文卡片鼠标hover悬停动画特效。该特效在鼠标hover图文卡片时，卡片底部的描述文字板块会向上滑动，显示出这篇文章的简短描述信息。

使用方法

在页面中引入卡片的必要样式文件style.css。

<link rel="stylesheet" href="css/style.css">

HTML结构

该CSS3图文卡片鼠标hover悬停动画特效的HTML结构如下：

<article class="card">
  <header class="card__thumb">
    <a href="#"><img src="img/1.jpg"/></a>
  </header>
  <date class="card__date">
    <span class="card__date__day">19</span>
    <br/>
    <span class="card__date__month">十月</span>
  </date>

  <div class="card__body">
    <div class="card__category"><a href="#">照片</a></div>
    <h2 class="card__title"><a href="#">我们在通往地狱的高速公路上！</a></h2>
    <div class="card__subtitle">本德医生正在煎熬！</div>
    <p class="card__description">正文的详细内容描述，我们在通往地狱的高速公路上，本德医生正在煎熬。正文的详细内容描述，我们在通往地狱的高速公路上，本德医生正在煎熬。我们在通往地狱的高速公路上。</p>
  </div>

  <footer class="card__footer">
    <span class="icon ion-clock"></span> 10分钟前
    <span class="icon ion-chatbox"></span><a href="#"> 145 评论</a>
  </footer>
</article>