如何自动调整以适应WP中悬停文本描述图像中的所有文本

时间:2016-10-14 08:40:31

标签: jquery css wordpress twitter-bootstrap twitter-bootstrap-3

我有一张图片,其内容来自wordpress帖子。任何人都可以帮助我如何使文本适合我的图像框的悬停效果。我很困惑为什么它不适合。我正在使用wordpress CMS。请特别检查下面的代码我的css。此外,我提供了一个行为错误的屏幕截图。我将不再发布我的javascript,因为它没有任何问题。请关注我的css我认为..?感谢。

Image Screenshot

这是我的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();

1 个答案:

答案 0 :(得分:0)

我需要在编辑器中尝试,但云可以使用max-height: 100px;

我觉得你的css有点混乱。但我需要尝试确保不工作。 无论如何,我今天正在使用这个http://jsfiddle.net/51csqs0b/我认为你可以获得一些灵感。