HTML
<div class="feature" >
<img src="0308_WVenvirophotos1-water-pollutions.jpg"
width="100%" height="100%"/></div>
CSS
.feature{
height:50%;
width: 60%;
float: left;
margin: 0.5%;
-webkit-transition: width 1s, height 1s, -webkit-transform 2s;
transition: width 1s, height 1s, transform 2s;
}
.feature:hover{
width: 800px;
height: 520px;
-webkit-transform: translate(,) ;
transform: translate(,);
}
此代码在悬停时使图片变大。如何在悬停时显示文字?
答案 0 :(得分:0)
使用伪元素:before,您可以执行以下操作:
.feature:hover:before {
content:'Text Goes Here';
font-size:20px;
color:white;
position:absolute;
top:0;
left:0;
}
基本上,我们通过使用以下内容属性将鼠标悬停在元素上。