# Interaction on hover over image

**URL:** <https://forum.pinegrow.com/t/interaction-on-hover-over-image/4897>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [January 29, 2021, 10:16am UTC](https://forum.pinegrow.com/t/interaction-on-hover-over-image/4897 "2021-01-29T10:16:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [January 29, 2021, 10:16am UTC](https://forum.pinegrow.com/t/interaction-on-hover-over-image/4897/1 "2021-01-29T10:16:00Z")

</div>

Good morning all,  
So I am working on a grid full of images. The moment I hover over one image all of the others get applied an opacity value, except for that image itself. A focusing effect.

[https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/732a6db5662619aa24c8cf92fa411bc510f8bcbf.mp4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/732a6db5662619aa24c8cf92fa411bc510f8bcbf.mp4)

Now, I don’t want to manually use the Selector and point to each image and tell gsap " on mouse move you apply opacity to img1,img2,img3,img4, etc.  
That is what I am doing right now (in the video). But then I would have to create an interaction for every single image in the grid, pointing all images, excluding itself in the Timeline Selector.

I feel I can achieve this by using the more advanced selector options. I read the docs explaining selectors, but not there yet.

It should be somethig like $img.grid-image-size + **exempt me!**

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5c56bd19c1950b32d6a61a6cf8794e1ce5690b29.png)  
It should be somethig like $img.grid-image-size + exempt me!

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 29, 2021, 12:22pm UTC](https://forum.pinegrow.com/t/interaction-on-hover-over-image/4897/2 "2021-01-29T12:22:01Z")

</div>

Hi @red-rosefields,  
So, to apply the interaction, I’m assuming that all of your images have a common class like ‘grid-image’. So add an interaction to the first. Add a timeline with the selector `$.grid-image`. Use this timeline to set the opacity to 0.2 or whatever number you want. Now add a second timeline right below it with a target of `this` and set the opacity to 1. Like CSS there is a cascade that will set the opacity on the hovered item to 1. Then just use apply to many and target every `$.grid-image`. You’ll olso need a mouse leave event. For that one just set all of the .grid-image to an opacity of 1.  
Hope this helps!  
Bob

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [January 29, 2021, 11:33pm UTC](https://forum.pinegrow.com/t/interaction-on-hover-over-image/4897/3 "2021-01-29T23:33:32Z")

</div>

The second timeline overwritting the first did the trick. The cascade logic in interactions… Really thank you man!  
I will share it once finished. It may help others.