Question

我希望对我制作的某些图像有一个漂亮的悬停效果。我想在鼠标悬停图像时显示文本。我可以让文本工作，但我希望有一个背景，使其更具可读性。

这是HTML：

<div class="portfolio-frame">
  <div class="portfolio-overflow-hidden">                                                   
    <img width="420" height="236" src="http://benjaminbinauld.lfdb.fr/files/2013/03/mire-servitel16-9.jpg"  />
    <div class="portfolio-overlay">
       <span class="text-overlay">Click here boy !</span>
     </div> 
  </div> 
</div>

CSS：

.portfolio-frame {
  height: 94px;
  width: 165px;
  margin-left: 10px;
  margin-top: 46px;
   z-index:1;

}
.portfolio-overflow-hidden {
  height: 94px;
  width: 165px;
}
.portfolio-overlay .text-overlay {
  display: none;
}
.portfolio-frame:hover .portfolio-overlay {
  display:block;
  position:inherit;
  z-index:999;
  background-color: #000;
}
.portfolio-frame:hover .text-overlay {
  display:block;

  z-index:999;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  margin-top: -45px;
}

我在这里制作了实时版：http://jsfiddle.net/fzKe7/

Answer 1

您需要将position:relative添加到.portfolio-overlay

请参阅小提琴here

你也可以收拾你的css：

.portfolio-frame {
  height: 94px;
  width: 165px;
  margin-left: 10px;
  margin-top: 46px;    
}

.portfolio-overflow-hidden {
  height: 94px;
  width: 165px;
}

.portfolio-overlay .text-overlay {
  display: none;
  position:inherit;
  background-color: #000;
  position:relative;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  top:-45px;
}

.portfolio-frame:hover .text-overlay {
  display:block;
}

Answer 2

.portfolio-frame:hover .portfolio-overlay {  display:block;  position:relative;  z-index:999;  background-color: #000; }

将位置更改为相对。这应该工作

在图像上创建文本溢出

2 个答案: