0

カーソルを合わせるとタイトルが強調表示されるグリッド スタイルのポートフォリオ ページを作成しようとしています。背景色も画像の上に表示したいと思います。これらの両方を作成しましたが、同時に発生させる方法がわかりません。以下は、HTML と CSS と、私が実際に何を意味するかを確認するためのリンクです。

.home_blog_box { position: relative; float: left; width: 287px; padding: 0 12px 12px 0; }
.home_blog_box img { width: 287px; height: 201px;  }
.home_blog_box h3 { position:absolute; width: 287px; height: 201px; bottom:3px; left:0px;}
.home_blog_box h3:hover {background-color: #777777; opacity:.85;}
.home_blog_box h3 a {opacity:0; color:#ffffff; text-decoration: none; font-size:30px;}
.home_blog_box h3 a:hover {opacity:1}


<div class="home_blog_box">
<?php } ?>
  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('featured-blog'); ?></a>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div><!--//home_blog_box-->

ありがとう！

4

1 に答える 1

2

:after または :before 疑似要素を使用すると、これをうまく行うことができます: http://jsfiddle.net/TpfA8/

例：

<div class="image-box">
  <img src="http://placehold.it/200x150" />
  <p>title</p>
</div>

および関連する CSS:

.image-box {
  position: relative;
  overflow: hidden;
  width: 200px;
}

.image-box:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200,100,100, 0.5);
}

.image-box p {
  display: none;
}

.image-box:hover p {
 display: block;
  position: absolute;
  top: 10px;
  left; 10px;
}

CSS で生成されたコンテンツを使用して、'' (何もない) のコンテンツの周りにボックスを作成していますが、この要素はまだボックス モデル (一種) に準拠しているため、高さ、幅、位置などを取得できます。

画像コンテナーの幅を指定して、overflow: hidden; を使用できるようにしてください。財産。

于 2013-01-07T22:20:19.753 に答える