Only show text on image when you hover - wordpress theme

Question

I'm using this WP theme and I'm struggeling to adjust the code so that the Title and Description in the content boxes only show on hover (at the moment they're always displayed and hover just makes the image go darker).

Here are the codes in question (as far as I can tell):

.home_featured_post_last { margin-right: 0; }

.home_featured_post_hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-decoration: none; border-radius: 5px; }

.home_featured_post_hover:hover { background: url('images/trans-back.png') repeat; text-decoration: none; border-radius: 5px; }

.home_featured_post_tbl { display: table; width: 100%; height: 100%; }

.home_featured_post_tbl_cell { display: block; text-align: center; vertical-align: middle; color: #fff; text-shadow: 1px 1px #000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 400; }

.home_featured_post_tbl_cell h3 { text-shadow: 1px 1px #000; font-size: 19px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 700; }

<a class="home_featured_post_hover" href="<?php the_permalink(); ?>">
                    <div class="home_featured_post_tbl">
                        <div class="home_featured_post_tbl_cell">
                            <h3><?php the_title(); ?></h3>
                            <p><?php echo ds_get_excerpt('40'); ?></p>
                        </div><!--//home_featured_post_tbl_cell-->
                    </div><!--//home_featured_post_tbl-->
                </a><!--//home_featured_post_hover-->

As suggested in some other posts, I've tried adding visibility: hidden; and visibility: visbile; to the CSS in various different combinations but either it just hides the text completely or it doesn't work at all. Does this have to do with how the PHP code is formated? Any thoughts on how to do this?

Sorry if this is really obvious - I can't work it out.

Aziz Aziz · Accepted Answer · 2015-10-24T12:53:47

Try adding these CSS lines... if you want a smoother effect, you can add the css transition property!

a.home_featured_post_hover .home_featured_post_tbl_cell { opacity:0; }

a.home_featured_post_hover:hover .home_featured_post_tbl_cell { opacity:1; }

What this does is basically make the title/desc div transparent, then show it when the mouse is over the link.

Only show text on image when you hover - wordpress theme

1 Answers