0
我试图创建一个带有不透明度的淡入淡出转换(请参阅我的JSFiddle),当您将鼠标悬停在圆上时将会显示淡入淡出转换。在转换悬停时在图像上显示文本
如何实现myContent
元素的漂亮淡入?
<div class="circle">
<div class="myContent">
<div class="name">Sasasaas</div>
<div class="position">asfasfasfas</div>
</div>
</div>
这是我使用
.circle {
width: 300px;
height: 300px;
border: 1px black solid;
border-radius: 200px;
background-image: url("http://vignette3.wikia.nocookie.net/yogscast/images/c/c7/Pixel_face_eyebrow_raised_600x600.png/revision/latest/scale-to-width-down/480?cb=20130529234139");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
margin: auto;
-webkit-filter: grayscale(50%);
-webkit-transition: all 0.5s;
}
.circle:hover {
-webkit-filter: none;
}
.myContent {
opacity: 0;
width: 170px;
height: 170px;
text-align: center;
padding: 15px;
/**position: relative;
visibility: hidden;
-webkit-transition: visibility 0.5s;**/
}
.circle:hover .myContent {
opacity: 1;
}
这就是伟大的,非常感谢! – ssabin
欢迎@ssabin接受,如果它适合你:-) – frnt