本文介绍了
在线预览 下载源码
在今天的教程中，我们将在圆上试验悬停效果。 自从有了border- radius属性，我们可以创建圆形形状，并且它们作为设计元素更常出现在网站中。 我特别喜欢看到的一个用途是圆形缩略图，它看起来比通常的矩形更有趣。 因为圆是如此特殊的形状，我们将为它创造一些特殊的悬停效果！
我们将在本教程中省略浏览器前缀。 但你当然会在下载文件中找到它们。
那么，让我们开始吧！
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 <a href="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>虽然我们可以在这里使用图像，但我们会通过使用背景图像来给自己更多的选择。 我们将在以“ch-img-”开头的类中定义它们。
现在，让我们做一些悬停效果吧！
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;
}
一些示例将具有不同的结构，但我们将更详细地研究每个示例。
示例1
第一个例子是通过缩放来揭示描述，我们还将为".ch-item"的内阴影设置动画。 所以让我们定位".ch-item"并设置一个漂亮的，内阴影和过渡：
