Docs

[alamtfuerwerbung]

Hi,
pls check the icons on this page

Home

How can I add that hover effect?

And pls check this page.
http://www.sph-kanzlei.de
There is another hover effect on the icons.
Can I do this with X? Do I need a plug-in, custom editing?

Thx
Andre

[Friech]

Hi Andre,

Thanks for writing in! It can be achieve with CSS :hover class and transform: scale(); property. Please provide us your site URL so we can take a closer look.

Cheers!

[alamtfuerwerbung]

ok thx. was just a general question, but I will need that soon and come back to this topic.
thx

[Lely]

You’re welcome Andre!

Cheers!

[alamtfuerwerbung]

if you pls could check http://www.sub.ihrwiderruf.de.

there are four icons. is it possible to give these icons a slightly pulse effect?

thx
andre

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.x-feature-box-graphic:hover img.square {
    animation: pulsate 1s ease-out;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;   
}

Hope it helps 🙂

[Joao]

Hi Andre,

You could use the Feature Box Element to execute the pulse of the icon, it is a built in function.

The feature Box will include the Icon and the subtitle.

Hope that helps

Joao

[alamtfuerwerbung]

Hi thx.
Solution 1 doesn´t work.

Solution 2 is great! But can I set the effect when hover?

Thx
A

[Rupok]

Hi there,

Do you want to apply hover effect for the icon on the Feature Box?

You can try this :

.x-feature-box-graphic img {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.x-feature-box-graphic img:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

Let’s add your own effect if needed.

Cheers!

[alamtfuerwerbung]

Hi thx, no just want to know if there´s a possibility to animate the icons her
http://www.sub.ihrwiderruf.de

Do I have to set the as featured box?
At the moment the icons are just images.

Thx
A

[Jade]

Hi Andre,

You can set those image icons in a feature box and apply an animation for the element.

Hope this helps.

[alamtfuerwerbung]

Hi, thx.
But that is not a hover effect.
It need a mousover pulsing. Is that possible?

Thx
Andre

[Rad]

Hi there,

The above CSS do the animation if you’re referring to those images within your featured box element. There is no pulse animation in hover, it may require CSS3 animation and keyframes but not all browser supported it.

Thanks!

[Author]

Posts