0

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

这是 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/

4

2 回答 2

1

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

在这里看小提琴

你也可以整理你的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;
}
于 2013-05-16T10:12:13.593 回答
1 
.portfolio-frame:hover .portfolio-overlay {  display:block;  position:relative;  z-index:999;  background-color: #000; }

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

于 2013-05-16T10:14:32.857 回答