.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}正如您之前注意到的那样，我们已经为列表项提供了两个类：一个是ch-item，另一个用于定义特定的背景图像：
.ch-img-1 {
background-image: url(../images/1.jpg);
}.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
".ch-info"将设置为绝对定位，我们将通过设置RGBA值为其提供半透明背景。 它的不透明度将设置为0，我们也将它缩小到0：
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}标题将具有一些padding和margin以及平滑的文本阴影：
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}p元素的不透明度为0和一个过渡（我们希望在悬停时将其淡入但有延迟时间）：
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}链接将使用大写字母，我们将悬停颜色设置为黄色：
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
现在，有趣的悬停动作！ ".ch-item"的内阴影的尺寸从16px设置为1px：
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}".ch-info"将淡入并缩放到1：
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}描述的段落p将会淡入（延迟）：
