如何在图像悬停中显示文本

2022-01-22 00:00:00 hover jquery javascript html css

我有一些缩略图，我想在悬停时在它们上面显示一些文字.我可以让它们在悬停时变暗，但不知道如何添加文本.

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.

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

这是我所做的:

    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>

演示: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.

给予位置时:相对；对于盒子，你是在说我现在是边界——对于我内在任何绝对定位的东西".(除非它们是相对的，然后像下面那样) - 所以，你想要淡入的绝对定位的封面 - 绝对定位到相关框的一个或多个边缘.(大多数人使用 top: 0; left: 0;) --- 所以绝对框不再在流"中.并生活在由亲属决定的自己的魔法世界中.

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.

源顺序:堆叠时您的 html 会出现自下而上.所以你的封面应该在图片下方(按 html 顺序) - 你可以使用 z-index - 但没有必要这样做.

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.

这里的负边距并不是很好，也不需要.您可以将文本居中对齐.我会做一些测试并在东西周围设置边界，这样你就可以看到它实际发生了什么.ALSO - 我鼓励你使用 box-sizing: border-box;关于一切......

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...

阅读:边框

<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;
}

这里是 jsfiddle 上的代码

相关文章