0

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.

1 Answer 1

0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.