如何在图像悬停中显示文字 [英] How to show text in image hover

问题描述

我有几个缩略图，我想在悬停中显示一些文字。我可以让它们在黑暗中悬停，但不知道如何添加文本。

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

这是我已经完成：

  a {
 display：inline-block; 
 overflow：hidden; 
职位：亲属; 
} 
 a：hover .play {
 background：url（http://goo.gl/yJqCOR）no-repeat center center; 
不透明度：0.8; 
位置：绝对; 
 width：200px; 
 height：200px; 
剩下：50％; 
 top：50％; 
 margin-left：-110px; 
 margin-top：-150px; 
} 
 
< a href =/> 
< div class =play>< / div> 
< img class =imgsrc =http://i42.tinypic.com/2v9zuc1.jpg/> 
< br /> 
< / a> 
  

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

解决方案

假设你想要这个列表：

这里有几个主要概念：相对定位以及它如何与绝对定位一起工作， 源订单和居中技术。

到盒子里，你会说我现在是边界 - 对于我内部任何绝对定位的东西（除非它们是相对的，然后就像那样） - 所以，你想要淡化的绝对定位掩护物 - 绝对位于相对框的一个或多个边缘。 （大多数人使用top：0; left：0;）---所以绝对盒子不再处于流动中，并且生活在由相对父母确定的自己的魔法世界中。

来源订单：您的html在堆叠时将显示为自下而上。所以你的封面应该在图片下面（按照html顺序） - 你可以使用z-index - 但不需要这样做。

负边距在这里并不真棒和不需要。你可以将文本对齐居中。我会做一些测试并在边界附近放置边界，以便您可以看到实际发生的情况。另外 - 我鼓励你使用盒子尺寸：边框;一切...

阅读关于：边框

HTML

 < ul class =thumbnail-list> 
 
< li> 
< a href =＃class =image-w> 
< img alt =thumbnail
 src =http://placekitten.com/600/300/> 
 
< div class =cover> 
< h3>标题< / h3> 
< p>有关物品的更多信息< / p> 
< / div> 
< / a> 
< / li> 
 
< / ul> <！ -  .thumbnail-list  - > 
  

CSS

  .thumbnail-list {
 list-style：none; 
保证金：0; paddingn：0; 
} 
 
 .thumbnail-list li {
 float：left; 
} 
 
 a {
 text-decoration：none; 
 color：inherit; 
} 
 
 .thumbnail-list .image-w {
 display：block; 
职位：亲属; 
 width：16em; 
} 
 
 .image -w img {
 display：block; 
宽度：100％; 
 height：auto; 
} 
 
 .cover {
 position：absolute; 
 top：0;正确：0; 
 bottom：0;左：0; 
宽度：100％; 
身高：100％; 
 color：rgba（255,255,255,0）; 
 text-align：center; 
转换：全1s线性; 
} 
 
 .cover：hover {
 background-color：rgba（0,0,0，.8）; 
 color：rgba（255,255,255,1）; 
转换：全部为2s线性; 
} 
 
 .thumbnail-list h3 {
 font-size：1.2em; 
} 
 
 .thumbnail-list p {
 font-size：.9em; 
} 
  

以下是jsfiddle上的代码

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/

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/

解决方案

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.

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.

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

这篇关于如何在图像悬停中显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！