How do i change Featured Page widget html output for a specific hover effect?

Community Forums Forums Design Tips and Tricks How do i change Featured Page widget html output for a specific hover effect?

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Seb 5 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #104920

    Seb
    Member
    Post count: 5

    I had a post before: http://www.studiopress.com/forums/topic/change-featured-page-widget-on-enterprise-pro-homepage-to-a-hover-effect/
    This is perfectly possible, but i want to create something more responsive specific with only html5 and css:

    http://jsfiddle.net/Ajucreazy/UR43Y/3/

    As you can see, all the content in this example is wrapped inside the image link: <a><img>...content...</a>.
    The reason for this is that the absolute layered divs (the content): div.hovertitle' and 'div.hovercontent need to be clickable. If you take these 2 divs out of the link, they block the ‘function of the link’ when you hover over the image-block.

    Now the standard featured page output is:

    <section>
        <div>
            <h4>
            <article>
                <a>
                    <img>
                <div>
                    <p>
                        <a>

    I would like to put the <div> <p> <a> inside the <a> after the <img> like this:

    <section>
        <div>
            <h4>
            <article>
                <a>
                    <img>
                    <div>
                        <p>
                            <a>

    Now i took a look at the genesis-featured-page.php file and i understand a little, but far from adjusting it create this output :S.
    How do i change this? Is there an easy way? Do i need to copy and paste some rules inside the genesis-featured-page.php file?

    Thanks for reading my post,

    Greetz

    #105038

    nutsandbolts
    Moderator
    Post count: 3139

    I’m not sure I understand what you’re hoping to do vs. what is already happening, but you should never, ever edit the Genesis framework files. You could create a file with the same name in your child theme’s folder to house changes, but nothing in the /genesis/ folder should be touched.

    It may be worth your time to consult with a developer on this one – there are a number of devs that are recommended by StudioPress listed here: http://www.studiopress.com/genesis-developers


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #105050

    Seb
    Member
    Post count: 5

    Thanks for the info Andrea, i always keep a copy if i change something, but there is a better place for that, you make me see ;).

    I want to make the custom content, i layer upon the image, clickable as a link. As 1 block. To behave as 1 link. I think the only way to accomplish that with HTML5 and CSS3 is to move the div-p-a output inside the link.

    #105056

    Seb
    Member
    Post count: 5

    I found a solution for this, it was obvious in my example code already: pointer-events:none; for the absolute positioned elements that you want the pointer functionality to shine through.

    The only problem is: it’s not that browser version friendly: http://caniuse.com/pointer-events

    So i’m still looking for the right way to adjust the featured-page-widget.php file inside the child theme :S.

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

You must be logged in to reply to this topic.