Question

.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
 -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


.text:hover {
opacity:1;
}

这是我将鼠标悬停在图片和文字外观上的CSS。

http://jsfiddle.net/LbLHc/

这就是我所拥有的。当我将鼠标悬停在外时，如何将文字放入图像中？

谢谢

Answer 1

Here is solution for you problem.
Html Code
<div class="row">
 <div class="relative imgContainer">
  <a href="works/nytimes/nytimes.html">
   <span class="text">NY times magazine: Table of Contents</span>
   <img src="http://placehold.it/500x200" class="img-responsive" />
  </a>
 </div>
 <div class="relative imgContainer">
  <span class="text">Eloquence Magazine</span>
  <img src="http://placehold.it/700x500"class="img-responsive" />
 </div>
</div>
**Css Code**
.imgContainer:hover .text{
    display:block;
    opacity:1;
}
.relative{
    position: relative;
}
.imgContainer{
   height: 250px;
   width: 400px;
   margin-bottom: 20px;
}
img{
   height: 250px;
   width: 400px;
}
.text {
   position: absolute;
   font-family: "courier new";
   font-size:30px;
   font-style: bold;
   color: blue;
   background-color:rgba(255,255,255,0.7);
   display:none;
   width: 100%;
   height:100%;
   text-align: center;  
   top:0; left:0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}


.text:hover {
    display:block;
    opacity:1;
}

FiddleLink http://jsfiddle.net/anu1718/Y2AYj/

Answer 2

如果我理解正确，您希望默认隐藏文本，并仅在将鼠标悬停在图像上时显示。如果您只想使用简单的CSS，则需要为图像和文本设置一个公共容器（后者是绝对定位和隐藏的），并添加一个CSS规则，其目标是：要显示的容器的悬停状态文本。

在您的代码中，我向容器中添加了一个类（ fadingtext ）：

<div class="row">
    <div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
          <span class="text">Title</span>
          <img src="http://placehold.it/500x200" class="img-responsive"/>
      </a>

    </div>
    <div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>

        <img src="http://placehold.it/700x500" class="img-responsive" />
    </div>
</div>

这是带有固定选择器的CSS：

.fadingtext .text {
    position: absolute;
    font-family:"courier new";
    font-size:30px;
    font-style: bold;
    color: blue;
    background-color:rgba(255, 255, 255, 0.7);
    width: 100%;
    line-height:50px;
    text-align: center;
    z-index:10;
    opacity: 0;
    display:block;
    height:100%;
    overflow: hidden;
    top:0;
    left:0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fadingtext:hover .text {
    opacity:1;
}

以下是jsfiddle的修改版本：

http://jsfiddle.net/Rws85/2/

图像悬停在图像内部和文本内部

2 个答案: