循环悬浮效果用CSS转换

一款圆形覆盖的多种好看的效果 Circle Hover Effects。圆形在当前的设计领域还是用得比较多的，我们只需要准备正常的矩形图片，然后就可以在这款特效的样式下变成圆形图片。接着当我们鼠标移动到图片上时，就会呈现多种不同的效果了。注意，该特效是基于css3打造的，所以我们的浏览器必须支持css3才能看到效果。

使用步骤
1、在body标签中加入以下格式的html代码
<ul class="ch-grid">   
    <li>
        <div class="ch-item ch-img-1">         
            <div class="ch-info">              
                <h3>
                    Use what you have
                </h3>
                <p>
                    by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a>
                </p>
            </div>
        </div>
    </li>
    <li>       
        <div class="ch-item ch-img-2">         
            <div class="ch-info">              
                <h3>
                    Common Causes of Stains
                </h3>
                <p>
                    by Antonio F. Mondragon <ahref="http://drbl.in/eKMi">View on Dribbble</a>
                </p>
            </div>
        </div>
    </li>
    <li>   
        <div class="ch-item ch-img-3"> 
            <div class="ch-info">      
                <h3>
                    Pink Lightning
                </h3>
                <p>
                    by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a>
                </p>
            </div>
        </div>
    </li>
</ul>            
事实上在这里我们并没有用到图片，那么为什么会有圆形图片效果呢，这个就需要我们在css中以 ch-img- 开头的样式中去定义了。
2、公共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;
}
以上两步定义了图片的html结构和公共的css样式，那么接下来我们就根据不同的效果来添加不同的鼠标样式了。