当悬停已经悬停以进行变换的图片时,如何显示文本?

时间:2015-03-06 00:47:35

标签: html css

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(,);
}

此代码在悬停时使图片变大。如何在悬停时显示文字?

1 个答案:

答案 0 :(得分:0)

使用伪元素:before,您可以执行以下操作:

.feature:hover:before {
  content:'Text Goes Here';
  font-size:20px;
  color:white;
  position:absolute;
  top:0;
  left:0;    
}

基本上,我们通过使用以下内容属性将鼠标悬停在元素上。

结帐时显示:http://jsfiddle.net/34p5xqmL/