Button change image?

[Paul B]

Hello Greensock.

I need help to create a button that changes the leaf image to another image.

 

 

fx to this image: https://cdn3.iconfinder.com/data/icons/weather-91/64/1-06-128.png

 

Is this possible at all?

 

 

 

pen forked from:

See the Pen KdmwMb by MAW (@MAW) on CodePen

 

Thanks!

 

 

See the Pen NRmxjd by Paul-B (@Paul-B) on CodePen

[Jonathan]

Hello Paul B and welcome to the GreenSock Forum

 

This is more of a javascript binding of a click event and CSS class changing question, then a GSAP API specific question.

 

But anyways..

 

All you do is create another CSS rule with a new class called snowflake. Then you toggle on and off the background image of your main #container2 div. #container2.snowflake .dot  .. see below

 

See the Pen zKQYBB by jonathan (@jonathan) on CodePen

 

Keep in mind that anytime you declare background property in your CSS you are using the CSS background shorthand syntax. So you should include the background-repeat, background-position, and background-color with your background-image. You were only defining the background-image inside the background shorthand.

.dot{
  width:35px;
  height:35px;
  position:absolute;
  background: url("http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png") no-repeat 0 0 transparent;
  background-size: 100% 100%;
}

#container2.snowflake .dot {
  background: url("https://cdn3.iconfinder.com/data/icons/weather-91/64/1-06-128.png") no-repeat 0 0 transparent;
  width: 128px;
  height: 128px;
  background-size: 35px 35px;
}

You also might want to make the snowflake image the same dimensions like the leaf is 35px by 35px.

 

Resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

[Paul B]

Thanks!

This helps us a lot 

 

Paul