カーソルを合わせるとタイトルが強調表示されるグリッド スタイルのポートフォリオ ページを作成しようとしています。背景色も画像の上に表示したいと思います。これらの両方を作成しましたが、同時に発生させる方法がわかりません。以下は、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-->
ありがとう!