Title on hover in index

Hello
Can any one help me about the following:
I design my new theme, In the index,I don’t want the title to show on post images, until a mouse over,

my current code is

> <div class="post-list">
> 	<div id="push">
> 		{{#foreach posts}}
> 			<article class="{{post_class}}">
> 				<div class="inner">				
> 					{{#if feature_image}}
> 					<figure class="post-image">
> 						<a href="{{url absolute="true"}}"><img src="{{img_url feature_image}}" alt="" />
> 						<h2 class="post-title-home">{{{title}}}</h2></a>
> 					</figure>
> 					{{/if}}			
> 				</div>
> 			</article>
> 		{{/foreach}}
> 	</div>
> </div>

Thanks.

Hi,

you can achieve that with CSS, by hiding your post-title-home and show it when post-image has a hovered state:

.post-title-home {
display:none;
}

.post-image:hover .post-title-home {
display: block;
}
1 Like

Can anyone show me how I can add overlay titles to the feature images on this index page?
I’m using Edge theme and have a custom feed page with featured posts which are being filtered by a tag. This is the featured.hbs file:

{{!< default}}

<div class="content-area">
    <main class="site-main container">
        <div class="post-feed">
            <div class="grid-item grid-sizer"></div>
            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}
        </div>
        {{pagination}}
    </main>
</div>

I’m finding it frustrating working with the .hbs files since you have to re-activate the edited theme each time, unlike CSS changes, to see the results which makes learning how it works a long process, any guidance appreciated :slight_smile: