Cancel Mouse Out Animation

Question

I have a hover effect from a plugin on our wordpress site. I just want it to simply change the image without any transform or transition effects. I have it to where I removed the effects now on Mouse In by changing this (it used to flip horizontally):

.ioi-container .ioi-style5 .he-box .he-content {
    transform: none; 
    transition: none;
}

The problem that on Mouse Out I can't find the CSS that makes the animation happen. Can anyone point me in the right direction. The development site is here:http://bdi.inventivewebdesign.com/ and the images in question are at the bottom of the page right above the footer.

score 1 · Accepted Answer · answered Apr 23 '20 at 19:22

1

Try this:

.ioi-container .ioi-style5 .he-box:hover .box-img {
    transform: none !important;
}

answered Apr 23 '20 at 19:22

awran5

4,333
2
15
32

score 0 · Answer 2 · answered Apr 23 '20 at 19:14

Some tips to debug in Chrome

Disable the slider animation via JS.
Slow down the animation speed in Chrome, Read more https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations
Find the hover CSS by simulating hover state in Chrome, Read more, How to use chrome web inspector to view hover code

I am sure you will be able to find the correct CSS selector to override like I did :)

Cancel Mouse Out Animation

2 Answers2