响应式鼠标悬停图片抖动的特效

一款响应式鼠标悬停图片抖动的特效，页面是响应式的，自适应效果还是挺不错的，每个图文消息的文字和图片均可以自由替换，鼠标悬停时的抖动效果也是相当的棒哦，喜欢的童鞋请收下吧。

分类：图片代码 > 图片墙难易：初级

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

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

页面的head部分，需引入一个CSS样式文件，代码如下：

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

页面的body部分，多个div容器放入不同的图文内容，代码如下：

<div id="con">
  <div class="zayn_1 shadow">
    <span class="new">推荐</span> <span class="date-1">2017年8月</span>
    <div class="overlay"></div>
    <h4 class="f-title">编程培养了创造性思维，<br> 不容小觑哦！</h4>
  </div>
</div>
<div id="con2">
  <div class="zayn_2 shadow">
    <span class="pop">流行</span> <span class="date">2017年8月</span>
    <div class="overlay"></div>
    <h4>想学编程永远不会太迟。</h4>
  </div>
  <div class="zayn_3 shadow">
    <span class="lat">最新</span> <span class="date">2017年8月</span>
    <div class="overlay"></div>
    <h4>修复了一个错误，整个人感觉棒极了。</h4>
  </div>
</div>
<div id="con3">
  <div class="zayn_4 shadow">
    <span class="free">免费</span> <span class="date-1">2017年8月</span>
    <div class="overlay"></div>
    <h4>学编程时，百度和谷歌都是你的好朋友。</h4>
  </div>
</div>