Mouseover image to bring up title/post info with GFWA

[Ben @ Inbound Creative]

Hey guys and gals,

I have a client that wants the title of the post and some other information (post info etc) to appear when a user hovers over the featured image generated by the genesis featured widget amplified on the home page.

For the life of me, I can't think of what is the right approach to achieve this. Can anyone point me in the right direction for some reading material on how to achieve this?

A good example of it is on Studiopress' newly redesigned theme shop (my.studiopress.com/themes).

Thanks in advance guys.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

http://www.milkandbeauty.com

[Tony @ AlphaBlossom]

Hi there,

There are some jquery solutions, but the way it's done on Studiopress's site, and I've used this method on other sites as well, is to add your new content inside of your block's parent container and set it to "opacity: 0;". Add a :hover class with "opacity: 1;" so when you hover over the block it will show.

<div class = "existing div container">
<a href="" class="mynewcontent">
     <h3 class="new content header">Header</h3>
     <p class="new content text">
          New content text goes here
     </p>
     <div class="new content button>Click here</div>
</a>
<a href="">
     <img src="your existing image is here"
</a>
</div><!-- end existing div container -->

For your css, you'd set the existing div container to "position: relative;"

Then for the new block, you'd set it as:
a.mynewcontent {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}

a.mynewcontent:hover {
opacity: 1;
}

Style your h3, p and button as you would normally.

You'll have to tweak it but that should get you going. Let me know if you have any problems with that.

Take care,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts