纯CSS图文消息的鼠标悬停特效【原创】

查看演示 下载资源 下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用一个CSS样式文件，并引入一个本地CSS样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，这里用了HTML 5的article、header和footer标签，中间一个div容器来放置说明文字，代码如下：

<h1 class="title">纯CSS图文消息的鼠标悬停特效</h1>
<article class="card">
  <header class="card__thumb">
    <a href="#"><img src="images/cover.jpg"/></a>
  </header>
  <date class="card__date">
    <span class="card__date__day">7</span>
    <br/>
    <span class="card__date__month">7月</span>
  </date>
  
  <div class="card__body">
    <div class="card__category"><a href="#">相册</a></div>
    <h2 class="card__title"><a href="#">纯CSS的鼠标悬停特效</a></h2>
    <div class="card__subtitle">个性化你的图文消息！</div>
    <div class="card__description">
      <p>鼠标悬停时自动显示下面说明文字，同时上面的图片有一个缩放的效果。</p>
      <p>支持多个文本段落的说明，当然字数也不能放太多哦。</p>
    </div>
  </div>
  
  <footer class="card__footer">
    <span class="icon ion-clock"></span> 38 分钟前
    <span class="icon ion-chatbox"></span><a href="#"> 88 条评论</a>
   </footer>
</article>