Change Icon Box animation from flip to fadeout

[DrYohann]

Hi, I’d like to change the animation in the icon boxes (animated type) from something that basically flips (and makes viewer dizzy if you ask me !) to a gentle fadedout. You can see mine right now at http://www.networkquebec.ca/CCN/

Where can I specify that ?

Thanks !

Yohann

[laranz – SUPPORT]

Hi,

Try this in the Custom CSS.

.standard-browser .sf-icon-box-animated:hover .back, .no-csstransitions .sf-icon-box-animated .back, .sf-icon-box-animated.sf-mobile-hover .back {
	   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.standard-browser .sf-icon-box-animated:hover .front, .no-csstransitions .sf-icon-box-animated .front, .sf-icon-box-animated.sf-mobile-hover .front {
	opacity: 0.5;
}

.sf-icon-box-animated .front {
	position: relative;
	z-index: 8;
	display: block;
	width: 100%;
	height: auto;
	padding: 70px 20px;
	webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.sf-icon-box-animated .back {
	overflow: hidden;
	background: #ffffff;
	padding: 20px;
	width: 100%;
	height: 100%;
	webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
opacity: 0.5;
}

Also I suggest you to remove those appropirate class styles from style.css

Let us know,

Thanks,
laranz.

[DrYohann]

Thanks Laranz. This doesn’t seem to change anything (I changed background on the back to #ba0000). What I see is still the same animation.

[Mohammad – SUPPORT]

Hi,
Have you removed the code at style.css as Laranz suggested to you?
Thanks
Mohammad

[DrYohann]

No, I thought this was a suggestion, not a requirement ! 🙂

I just did.

Now, can I make it so that the fade out masks what is behind it when i hover ?

Yohann

[laranz – SUPPORT]

Hi,

Try to change this in that Custom CSS.

.standard-browser .sf-icon-box-animated:hover .front, .no-csstransitions .sf-icon-box-animated .front, .sf-icon-box-animated.sf-mobile-hover .front {
    opacity: 0.01;
}

Let us know,

Thanks,
laranz.