Scale a child inside an array?

[kabocreative 31 Likes (Newbie)]

Hi!

I've got a pretty simple challenge that's stumped me.. 

 

I've got a series of container divs which include text + image. I want the image to zoom on hover/mousenter, i.e. in CSS:

 

.container:hover img {
  transform: scale(1.1);
}

Where I'm finding this tricky is that it is when the container (parent) is hovered that the img (child) should scale.

 

I've worked out utils.toArray and forEach are the things I want to play with, but I've made a bit of a mess that doesn't work whacking one inside the other:
 

gsap.utils.toArray("#portfolio-scene .container").forEach(blurb => {
  gsap.utils.toArray("#portfolio-scene .container img").forEach(image => {
	let hover = gsap.to(image, {scale: 1.1, duration: 1.5, paused: true, ease: "power1.inOut"});
  	blurb.addEventListener("mouseenter", () => hover.play());
  	blurb.addEventListener("mouseleave", () => hover.reverse());
  })
});

I know it's not right, but I'm not sure what is. Currently if you hover on any container all img's scale.

 

I also tried the following which caused the exact same behaviour:

 

gsap.utils.toArray("#portfolio-scene .container").forEach(blurb => {
  let image = gsap.utils.toArray("#portfolio-scene .container img")
  let hover = gsap.to(image, {scale: 1.1, duration: 1.5, paused: true, ease: "power1.inOut"});
  blurb.addEventListener("mouseenter", () => hover.play());
  blurb.addEventListener("mouseleave", () => hover.reverse());
});

Codepen:

Massive thanks to anyone who can point out where I'm going wrong

 

See the Pen ZExVQVL by kabocreative (@kabocreative) on CodePen

[Carl 11,165 Likes (Superhero)]

I think this should do the trick

 

See the Pen XWEodKZ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

for each blurb you can call querySelector() like so 

 

gsap.to(blurb.querySelector(".image-container img")...

 

[Carl 11,165 Likes (Superhero)]

A similar technique is used to "open and close" items in this Creative Coding Club demo

 

See the Pen BaLWxLW by snorkltv (@snorkltv) on CodePen

 

 

Student Link to Lesson Video: https://www.creativecodingclub.com/courses/take/b-sides-bonuses-and-oddities/lessons/19117678-auto-close-open-item-reverse-current-timeline

 

[kabocreative 31 Likes (Newbie)]

Big thanks Carl! So simple (if you know what you are looking for!) and makes perfect sense. 

 

Thanks also for the direct link to the lesson. I've found the course incredibly helpful! Ran through the SVG modules this week and thoroughly enjoyed having a play!  I've got some lovely SVGs working on the staging site now ready for launch. Thanks!!

 

 

[Carl 11,165 Likes (Superhero)]

So good to see and hear of all the progress! Please stop running through the videos and learning so quickly. I need time to make more