Title placement on Slider Image

Hi mmshahid73.

1. Copy the theme template file featured-content.php to a child theme. If you don't currently have a child theme install one using the instructions here:
href="https://docs.presscustomizr.com/article/239-using-a-child-theme-with-hueman

2. Move the entire "post-title" section so it's at the bottom of the "post-thumbnail" section:

<?php if ( comments_open() && ( hu_is_checked('comment-count' ) ) ): ?>
	<a class="post-comments" href="<?php comments_link(); ?>"><span><i class="fa fa-comments-o"></i><?php comments_number( '0', '1', '%' ); ?></span></a>
<?php endif; ?>

<!-- post title moved up into thumbnail section -->
<h2 class="post-title entry-title">
	<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h2><!--/.post-title-->

</div><!--/.post-thumbnail-->

3. Add this CSS to your child theme style.css file:

/* stick featured post title to bottom of post image */
.featured .post-title {
  position: absolute;
  bottom: 0;
  left: 10px;
}
.featured .post-title a {
  color: #fff;
}

Thanks bdbrown! its working like charm.

I added few CSS for better visibility of white text over white background, space between slider Title and category name, also set slider width and height, i am pasting the code for anyone who need it.

/* Slider Width */
.flexslider .slides img {
	width: 100%;
	max-height: 350px;
}

/* stick featured post title to bottom of post image */
.featured .post-title {
	position: absolute;
	bottom: 0;
	left: 10px;
	bottom: 15px;
}

.featured .post-title a {
	color: white;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

Screen shot

Live demo: https://www.alkamunia.com

Thanks

• This reply was modified 8 years, 5 months ago by mmshahid73.

You’re welcome; glad you got it working.