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 
.portfolio-frame:hover .portfolio-overlay {  display:block;  position:relative;  z-index:999;  background-color: #000; }

位置を相対に変更します。それはうまくいくはずです

于 2013-05-16T10:14:32.857 に答える
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 に答える