我正在尝试创建一个网格样式的投资组合页面,其中标题在悬停时突出显示。我还希望在图像上显示背景颜色。我已经创建了这两个,但无法弄清楚如何让它们同时发生。下面是 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-->
谢谢!