html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效

这是一款纯css3炫酷圆形图片鼠标滑过特效插件。在插件中，所有的缩略图都被用css3 border-radius制作成圆形，然后再在其上做各种鼠标滑过特效。

HTML

所有demo的html结构都如下所示：

• Use what you have

  by Angela Duncan View on htmleaf

• Common Causes of Stains

  by Antonio F. Mondragon View on htmleaf

• Pink Lightning

  by Charlie Wagers View on htmleaf

虽然这里可以使用图片，但是为了更加容易控制动画效果，这里使用的是背景图片。给每个div添加class为ch-img-。ch-info为图片的描述信息。

通用部分的css代码如下：

.ch-grid {

margin: 20px 0 0 0;

padding: 0;

list-style: none;

display: block;

text-align: center;

width: 100%;

}

.ch-grid:after,

.ch-item:before {

content: '';

display: table;

}

.ch-grid:after {

clear: both;

}

.ch-grid li {

width: 220px;

height: 220px;

display: inline-block;

margin: 20px;

}

通过设置列表的display为inline-block和text-align为center是列表相对于它的父元素居中。

下面是7种效果的缩略图：

各个demo的css代码请参考下载文件。