本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果，这个效果在产品展示或列表图片中都可以应用，可以说是应用范围挺广泛的。关于鼠标悬停效果，你还可以看看另一篇文章《使用css转换和3d旋转的圆形鼠标悬停效果【2例】》
css3圆形鼠标悬停效果
在本例中，我们希望将内部缩略图部分缩小到0，并通过淡入并缩小到1来显示描述元素。
示例结构
本示例我们将使用以下结构：
taxi
byAnaVilla-ZamoraViewonDribbble
我们将在以“ch img-”开头的类中定义它们。另外，我们将有一个带有标题的项目描述分区。
样式
这个项目有一个常用样式：
.ch-item{
width:100%;
height:100%;
border-radius:50%;
position:relative;
box-shadow:01px2pxrgba(0,0,0,0.1);
cursor:default;
}
描述div的包装器和info div本身将具有以下通用样式：
.ch-info-wrap,
.ch-info{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
}
设置相同的背景的主体包装：
.ch-info-wrap{
top:20px;
left:20px;
background:#f9f9f9url(../images/bg.jpg);
box-shadow:
00020pxrgba(255,255,255,0.2),
inset003pxrgba(115,114,23,0.8);
}
“front”和“back”(不再是真正的前和后)共同的类型：
.ch-info>div{
display:block;
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background-position:centercenter;
}
“front”将有一个过渡(它将缩小并消失)：
.ch-info.ch-info-front{
transition:all0.6sease-in-out;
}
保留描述的背面最初将具有0不透明度，并放大到1.5：
.ch-info.ch-info-back{
opacity:0;
background:#223e87;
pointer-events:none;
transform:scale(1.5);
transition:all0.4sease-in-out0.2s;
}
我们需要将指针事件设置为“没有”，因为我们不希望该元素“block”所有其他东西…记住，它被放大了，我们不能看到它，因为它不透明度，但它仍然存在。
.ch-img-1{
background-image:url(../images/13.jpg);
}
.ch-img-2{
background-image:url(../images/14.jpg);
}
.ch-img-3{
background-image:url(../images/15.jpg);
}
.ch-infoh3{
color:#fff;
text-transform:uppercase;
letter-spacing:2px;
font-size:18px;
margin:015px;
padding:40px000;
height:80px;
font-family:'OpenSans',Arial,sans-serif;
text-shadow:
001px#fff,
01px2pxrgba(0,0,0,0.3);
}
.ch-infop{
color:#fff;
padding:10px5px0;
font-style:italic;
margin:030px;
font-size:12px;
border-top:1pxsolidrgba(255,255,255,0.5);
}
.ch-infopa{
display:block;
color:#e7615e;
font-style:normal;
font-weight:700;
text-transform:uppercase;
font-size:9px;
letter-spacing:1px;
padding-top:4px;
font-family:'OpenSans',Arial,sans-serif;
}
.ch-infopa:hover{
color:#fff;
}
悬停时，我们将缩小内部缩略图部分为0，并将不透明度设置为0。这会让它消失在后面。
.ch-item:hover.ch-info-front{
transform:scale(0);
opacity:0;
}
包含描述的部分将缩小为1并淡入。我们还将指针事件设置为以前的任何值，因为现在我们希望能够单击链接：
.ch-item:hover.ch-info-back{
transform:scale(1);
opacity:1;
pointer-events:auto;
}
相关文章
