-1

http://studionudge.com/work:hoverのようなエフェクトを作ろうとしています。

3 つのサムネイルがあり、それぞれの幅は 30%、余白は 5% です。パーセンテージのため、幅が固定されておらず、機能させるのが非常に困難です。ホバーを表示したり、テキストを中央に配置したりできません。

それは可能ですか？

ここに私のHTMLがあります：

<div id="thumnails">
  <div class="thumb1">
    <div id="mask">
      <div class="thumb-title"><h3>Project title</h3></div>
    </div>
    <img src="images/work.jpg">
  </div> 
</div><!-- #thumbnails -->

そして私のCSS：

#thumbnails {
  border-bottom: 1px solid #b2b2b2;
  overflow: hidden;
}

#thumb1 {
  width: 30%;
  height: auto;
  margin-right: 5%;
}

#mask {
  position: absolute;
  background-color: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

#thumb1:hover #mask {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

#thumb1 img {
  max-width: 100%;
  height: auto;
}

.thumb-title {
  position: absolute;
  text-align: center;
  margin-top: 150px;
}
4

1 に答える 1

0

マスクにカーソルを合わせると、thumb1 にカーソルを合わせていないため、おそらく機能していません。あなたが尊敬しているサイトは、それを行う方法の良い例です. パーセンテージは問題ではないはずです。

于 2013-01-08T18:10:37.587 に答える