Title: Hover Effects
Last modified: August 31, 2016

---

# Hover Effects

 *  [HammerSix](https://wordpress.org/support/users/hammersix/)
 * (@hammersix)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/hover-effects-1/)
 * 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](https://wordpress.org/support/users/leglesslizard/)
 * (@leglesslizard)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/hover-effects-1/#post-6996898)
 * 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](https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts)
   and [child theme information](https://codex.wordpress.org/Child_Themes) 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.

## Tags

 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [images](https://wordpress.org/support/topic-tag/images/)
 * [text](https://wordpress.org/support/topic-tag/text/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 1 reply
 * 2 participants
 * Last reply from: [Joey](https://wordpress.org/support/users/leglesslizard/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/hover-effects-1/#post-6996898)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics