Hover Effects

  • I want to underline or otherwise highlight specific words that refer to a specific picture. When a reader hovers over those words, I want for the associated picture (not in the same place as the words) to expand by about 15-20%. For example, the content might read, “As shown right, I painted the interior black.” Therefore on “hoverin” when a reader hovers over “right” the associated picture grows, and on “hoverout” returns to original size.

    Is there a way to create hover effects in which the hover location and the effect location are separated?

    I am totally new to this, but hopefully just savvy enough to decipher what I expect might be very complex answers. Thanks for any suggestions and hand-holding available.

Viewing 1 replies (of 1 total)
  • Joey

    (@leglesslizard)

    Hi,

    I might be wrong (quite possibly!) but believe the only way to achieve this would be to use javascript and I’d advise looking at jQuery if this isn’t an avenue you want to venture down as it is a lot simpler ??

    You’d need to enqueue a javascript file within your child theme on the pages that you need to add this effect (information for enqueuing javascript and child theme information is all well documented in the codex). Within the javascript file (.js) you’d define exactly what you wanted to do within a jQuery block. So, for example, I’d look at the IDs of the elements I wanted and when the user hovered over element1, I’d add an effect to element2:

    jQuery( document ).ready( function( $ ){
    $( '#element1' ).hover( growImage, returnImageToOriginal );

    function growImage() {
        $( '#element2' ).css( {height: '+=10%', width: '+=10%'} );
    }

    function returnImageToOriginal() {
        $( '#element2' ).css( {height: "", width: ""} );
    }
});

    I’m not too hot on javascript but this should put you on the right path. What this code would do is look at the first element (it’s ID here is set to element1, # denotes ID) and when the user is over it invoke function “growImage”. This is defined below and this will change the style of the second element (ID element2) to make it 10% bigger. The second function will be called when the user ceases to hover over the first element anymore and this will remove the style properties that we just added.

    Hope this helps some! Seriously, loads on info out there if you look around ??
    Joey

Viewing 1 replies (of 1 total)
  • The topic ‘Hover Effects’ is closed to new replies.