[英]How can I make text appear when hovering a picture that has already the hovering for transform?
HTML HTML
<div class="feature" >
<img src="0308_WVenvirophotos1-water-pollutions.jpg"
width="100%" height="100%"/></div>
CSS 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(,);
}
This code makes the picture larger when hovered. 此代码使图片在悬停时变大。 How can I make the text appear on hover as well? 如何在悬停时显示文字?
Using the pseudo element :before , you can do something like this: 使用伪元素:之前 ,你可以这样做:
.feature:hover:before {
content:'Text Goes Here';
font-size:20px;
color:white;
position:absolute;
top:0;
left:0;
}
Essentially, we're adding the text to the element on hover by using the content property of :before . 基本上,我们通过使用:之前的content属性在悬停时将文本添加到元素。
Checkout a fiddle showing that here: http://jsfiddle.net/34p5xqmL/ 看看这里显示的小提琴: http : //jsfiddle.net/34p5xqmL/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.