如何在图像中显示文本

I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.

我有一些肚子，我想在它们上面显示一些文字。我可以让它们在鼠标悬停时变黑，但不知道如何添加文本。

example: http://www.lenzflare.com/video-production-portfolio/

例如:http://www.lenzflare.com/video-production-portfolio/

Here is what I have done:

以下是我所做的:

    a {
    display: inline-block;
    overflow: hidden;
    position: relative;
    }
    a:hover .play {
    background:url(http://goo.gl/yJqCOR) no-repeat center    center;
    opacity: 0.8;
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -150px;
    }

<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>

Demo: http://jsfiddle.net/jmXdh/79/

演示:http://jsfiddle.net/jmXdh/79/

7 个解决方案

#1

Well I'm going to assume you want this in a list:

我假设你想要这个列表:

There are a few main concepts here: Relative positioning and how it works with absolute positioning, Source order, and your centering technique.

这里有几个主要的概念:相对定位以及它如何与绝对定位、源顺序和中心技术一起工作。

When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.

当给位置:相对;箱子,你说:“我现在的边界——对于任何绝对定位的东西在我里面”(除非他们是相对的,然后这样的),所以,绝对定位覆盖件你想淡入——是绝对定位到一个或多个边缘的相对盒子。(大多数人使用top: 0;左:0;)--- -因此绝对的盒子不再是“流动”，而是生活在由相对的父母决定的自己的魔法世界里。

Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.

源代码顺序:你的html将出现自下而上的堆叠。所以你的封面应该低于图片(在html的顺序)-你可以使用z索引-但是没有必要那样做。

The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...

这里的负边际并不是很好，也不需要。你可以只对它们进行文本对齐。我会做一些测试，在东西周围加上边框，这样你就能看到它到底发生了什么。另外，我鼓励你使用盒子大小的盒子;一切……

Read about: Border box

读到:边界框

HTML

<ul class="thumbnail-list">

  <li>
    <a href="#" class="image-w">
      <img alt="thumbnail"
           src="http://placekitten.com/600/300" />

      <div class="cover">
        <h3>Title</h3>
        <p>A little bit more about the thing</p>
      </div>
    </a>
  </li>

</ul> <!-- .thumbnail-list -->

CSS

.thumbnail-list {
  list-style: none;
  margin: 0; paddingn: 0;
}

.thumbnail-list li {
  float: left;
}

a {
  text-decoration: none;
  color: inherit;
}

.thumbnail-list .image-w {
  display: block;
  position: relative;
  width: 16em;
}

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.cover {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0);
  text-align: center;
  transition: all 1s linear;
}

.cover:hover {
  background-color: rgba(0,0,0,.8);
  color: rgba(255,255,255,1);
  transition: all .2s linear;
}

.thumbnail-list h3 {
  font-size: 1.2em;
}

.thumbnail-list p {
  font-size: .9em;
}

Here is the code in action on jsfiddle

下面是在jsfiddle运行的代码

#2

you could consider something like this fiddle. I copy my code here:

你可以考虑像这样的东西。我在这里复制我的代码:

=================

= = = = = = = = = = = = = = = = =

HTML

    <a href="/"  class="img" 
          style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');" 
          onmouseover="this.firstElementChild.style.display='block'" >
          <span class='play' onmouseout="this.style.display = 'none'";>
           my lovely text here
          <span>
    </a>

=================

= = = = = = = = = = = = = = = = =

CSS

a {
    min-height:104px;
    min-width:184px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.play{
    display:none;
    color:#fff;
    height:104px;
    width:184px;
    background-color:rgba(0,0,0,0.5);
    position: absolute;
}

#3

This works:

如此:

.pic{
    background: url(http://i42.tinypic.com/2v9zuc1.jpg);
    width: 200px;
    height: 100px;
}

.text{
    background: black;
    text-align: center;
    color: white;
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.text:hover{
    opacity: 0.8;
}


<div class="pic">
    <div class="text">My Text</div>
</div>

DEMO

演示

#4

Add some text content to the play element.

向play元素添加一些文本内容。

<div class="play">Some text</div>

With added css for .play:

添加css为.play:

color:#fff;
font-size:16px;

#5

It sounds like you want to have a tooltip, if so then add a title to the a href:

听起来你想要有一个工具提示，如果有，然后添加一个标题到a href:

<a href="/" title="This is my text" >

You could also use the tooltip in jQuery UI.

您还可以在jQuery UI中使用工具提示。

Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.

否则，可以使用javascript onmouseover或jQuery hover / mouseenter事件来显示play div中的文本。

#6

Try this: http://jsfiddle.net/JU7zm/

试试这个:http://jsfiddle.net/JU7zm/

<a href="/">
    <div class="play">text</div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>



a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

a .play {
    display: none;
    background:url(http://goo.gl/yJqCOR) no-repeat center center;
    opacity: 0.8;
    position: absolute;
    width: 184px;
    height: 104px;
    color: #fff;
}

a:hover .play { display: block;  }

#7

Here's a simple JS solution you can insert into your HTML:

这里有一个简单的JS解决方案，您可以插入到您的HTML:

<script type="text/javascript">
    document.getElementById("your_image_id").title = 'your hover text';
</script>