[Zach WParticipant]

Hi there-

Are there any animations you can add in x theme?

My url is: http://zachswebdesigns.com

I want the images that lead you to the pages on my home screen to enlarge when you hover over them. This features is included in the demo of customizr. Is there a way to add this? (custom css or something)

Thanks!

Also, I wanted to thank everyone in the forum (especially the support people).
I use it so much and I always get my problem solved. Thanks again!

[Nabeel AModerator]

Hey Zach,

You can enlarge the images on hover by adding the Custom CSS via Customizer. Just for an example you can do it like this.

img:hover {
width: 150%; /* If originally it was 100% */
}

Also you can use the CSS transition property to give it a good animation feel.

Let us know if you need any further assistance on this.

[Zach WParticipant]

What is the transition property?

[Zach WParticipant]

Also, I want it only on select images

[Nabeel AModerator]

Hey Zack,

Here is an example with transition property:

img:hover {
    width: 100px;
    height: 100px;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

Give the images a separate class and apply this CSS on it. This will ensure only those images will get animated for which you have given a class.

[Zach WParticipant]

Hi again-

How do I give the image a separate class?

[Nabeel AModerator]

Hey Zach,

You can give an image a class like this:

<img class="my-class" src="/path/" alt="" />

You will need to switch from visual editor to text editor to do this.

[Zach WParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hey Zach,

Define images like this in text editor

<img class="my-class" src="/path/" alt="" />

then use this class in customizer to add CSS code like this:

.my-class:hover {
    width: 150%;
    height: 150%;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

Hopefully this explains better!

[Author]

Posts