html标题前圆圈样式,漂亮的css3圆形鼠标悬停效果实例

本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果，这个效果在产品展示或列表图片中都可以应用，可以说是应用范围挺广泛的。关于鼠标悬停效果，你还可以看看另一篇文章《使用css转换和3d旋转的圆形鼠标悬停效果【2例】》

css3圆形鼠标悬停效果

在本例中，我们希望将内部缩略图部分缩小到0，并通过淡入并缩小到1来显示描述元素。

示例结构

本示例我们将使用以下结构：

taxi

by Ana Villa-Zamora View on Dribbble

我们将在以“ch img-”开头的类中定义它们。另外，我们将有一个带有标题的项目描述分区。

样式

这个项目有一个常用样式：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

box-shadow: 0 1px 2px rgba(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: #f9f9f9 url(../images/bg.jpg);

box-shadow:

0 0 0 20px rgba(255,255,255,0.2),

inset 0 0 3px rgba(115,114, 23, 0.8);

}

“front”和“back”(不再是真正的前和后)共同的类型：

.ch-info > div {

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-position: center center;

}

“front”将有一个过渡(它将缩小并消失)：

.ch-info .ch-info-front {

transition: all 0.6s ease-in-out;

}

保留描述的背面最初将具有0不透明度，并放大到1.5：

.ch-info .ch-info-back {

opacity: 0;

background: #223e87;

pointer-events: none;

transform: scale(1.5);

transition: all 0.4s ease-in-out 0.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-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 18px;

margin: 0 15px;

padding: 40px 0 0 0;

height: 80px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px 0;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: #e7615e;

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: #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;

}

相关文章