我有一张图片,其内容来自wordpress帖子。任何人都可以帮助我如何使文本适合我的图像框的悬停效果。我很困惑为什么它不适合。我正在使用wordpress CMS。请特别检查下面的代码我的css。此外,我提供了一个行为错误的屏幕截图。我将不再发布我的javascript,因为它没有任何问题。请关注我的css我认为..?感谢。
这是我的CSS:
.top-featured-image {
position:relative;
width: 280px;
overflow:hidden;
display:inline;
}
.top-featured-image span {
background-color: rgba(130,127,122,0.7);
color:white;
font-size: small;
position:absolute;
bottom: -97px;
left:0px;
padding-left: 5px;
padding-right: 5px;
max-height: 100px;
width:300px;
display: none;
float:left;
text-align:left !important;
}
.top-featured-image span a {
color:white;
}
.top-featured-image span a:hover {
color:white;
}
.top-featured-image ul {
list-style:none;
display: inline;
}
这是我的带有wordpress post循环的HTML,我认为这里没有问题?只有CSS: 如果
( $productsBlog->have_posts() ) :
?>
<div class="container">
<ul class="image">
<div class="row row-centered">
<?php while ( $productsBlog->have_posts() ) : $productsBlog->the_post(); ?>
<div class="col-xs-4 col-box1" onMouseOver="show_title<?php echo $count ?>()" onMouseOut="hide_title<?php echo $count ?>()">
<li class="top-featured-image">
<span class="effect" id="hoverli<?php echo $count ?>"><?php the_content( sprintf('<a href="%s">', esc_url(get_permalink())),'</a>'); ?></span>
<?php the_post_thumbnail('productsize'); ?>
</div>
<?php if($count==2) :
echo '</div>';
echo '<div class="row row-centered">';
endif; ?>
</li>
<?php $count++; endwhile; ?>
</ul>
</div>
<?php endif;
wp_reset_postdata();
答案 0 :(得分:0)
我需要在编辑器中尝试,但云可以使用max-height: 100px;
我觉得你的css有点混乱。但我需要尝试确保不工作。 无论如何,我今天正在使用这个http://jsfiddle.net/51csqs0b/我认为你可以获得一些灵感。