Mouseover image to bring up title/post info with GFWA

Community Forums Forums Design Tips and Tricks Mouseover image to bring up title/post info with GFWA

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Tony @ AlphaBlossom 9 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #65713

    Advice Media
    Participant
    Post count: 26

    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.


    http://www.milkandbeauty.com
    #65745

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    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


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.