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

我从wordpress post上看到了一张内容悬停的图片。谁能帮助我如何使文本适合我的图像框的悬停效果。我很困惑为什么它不合适。我正在使用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;
}

这是我的HTML和wordpress帖子循环，我认为这里没有问题？。仅CSS： 如果

（$productsBlog->have_posts（））：
?>

我需要在编辑器中尝试，但是您使用的云是
max-height:100px

我觉得你的css有点混乱。但我需要确认一下，这是行不通的。
不管怎样，我今天正在处理这个问题，我想你可以从中获得一些灵感。
我需要在编辑器中尝试，但是你可以使用云计算
最大高度：100px

我觉得你的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();