Блог

у меня есть изображение с наведением курсора на его содержимое из сообщения WordPress. Кто-нибудь может мне помочь, как сделать так, чтобы текст помещался внутри эффекта наведения курсора моего поля изображения. Я очень смущен, почему он не подходит. Я использую CMS WordPress. Пожалуйста, проверьте мой код ниже, особенно мой 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() ) : 
                ?>
<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();
 

мне нужно попробовать в редакторе, но облако, которое вы используете max-height: 100px;

Я чувствую, что немного путаю ваш css. Но мне нужно попробовать, чтобы быть уверенным, что это не сработает. Во всяком случае, я сегодня работал с этим http://jsfiddle.net/51csqs0b / Я думаю, вы можете черпать вдохновение.