Hey there, I've been struggling with making the text fit inside the hover effect of my image box in a WordPress post. Any suggestions on how to resolve this issue? I have provided a link to a screenshot where the problem is visible. Please take a look at my CSS code below and let me know if you see any issues. Thanks!
https://i.sstatic.net/onkhB.png
Below is the snippet of my 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;
}
And here's a snippet from my HTML containing the WordPress post loop:
( $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();