Simple Hover Animation – Only Triggered Over Small Area of Object

[ruby76]

Hello – I’m pretty new to CSS animation, and I’m hoping someone can help me identify what I’m doing wrong. I’ve got a simple structure of divs and animation CSS outlined in a pen here: https://codepen.io/ruby76/pen/dRPrwZ

On hover, the icon “pulses” an animated circle border, but only when I place my mouse perfectly in the center. This is basically an icon image, with a div overlay positioned over the top (this centers better on the site I’m working on than in the CodePen preview), and on hover it runs the animation effect. It does what I want, but I can’t figure out whether it’s the staggered positioning of that top element or what that’s seeming to require the cursor to be exactly in the middle before triggering the animation effect.

Any ideas from those experienced in this neck of the woods? Thanks in advance for any pointers!

Actual site in progress is here: http://landesseattle.com/rebrand

[JeroenR]

Here is an example https://codepen.io/jeroenreijs/pen/jwEoyG. I guess what makes it flickering is the scaling of the element you’re hovering. So in the example I let div.icon-pulse trigger the hover event and div.icon-pulse2 handle the animation. In that case the hovering isn’t effected by the animation. I also got rid of all the !important rules in your CSS. You should be careful with using !importants. And they are not needed in your example anyway.

[Paulie_D]

It’s an odd way to do an overlay.

Why not use absolute positioning?

Plus you are waaay overusing !important.

I’ll see if I can take a look later as I’m short on time now.

[Paulie_D]

More use of classes (and less IDs) and position the overlay absolutely.

Also, the transform property was affecting the overlay since as soon as you hovered, the scale was reduced which mean that the element was no longer actual under the mouse.

Fixed that by just switching the hover to the parent….much simpler.

https://codepen.io/Paulie-D/pen/awObQB

In fact, you can do it without a pulsing div at all…use a pseudo-element instead.

https://codepen.io/Paulie-D/pen/VWLwgr

[ruby76]

Thanks for the tips, guys – this helps a lot. I agree it’s a weird way to do it; absolute positioning worked fine before I had to plug it into this WordPress template. All of that structure and preset CSS makes me lean toward putting “!important” on almost everything right now. Working on training to make my own WP templates, and then life will be much easier. :) Thanks again!

[Author]

Posts