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.
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:
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.
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.