Icon Boxes "Reversing" in IE

[ronin]

Hi,

A little while ago Ed provided us with some code so that we could put extra info in icon boxes. (pasted below) We’ve used it on this site: http://www.mcfillin.com.au and it’s working great in FF & Chrome, but in IE, when you hover, it doesn’t reveal the “back”, it just reverses the front like a mirror.

Cheers, Kurt

[spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” el_class=”.home-boxes” width=”1/4″ el_position=”first”]
<div class=”sf-icon-box sf-icon-box-animated”>
<div class=”inner”>
<div class=”front”>

<div class=”sf-icon-box-content-wrap clearfix”>
<h3>Management Accounting</h3>
</div>
</div>
<div class=”back”>
<table>
<tbody>
<tr>
<td>
<h3>Management Accounting</h3>
<div class=”sf-icon-box-content”>

Whether planning for business expansion and growth or working through difficult business problems or situations that arise, we can help you formulate a plan for success. Explore Management Accounting

</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
[/spb_text_block]

[Swift Ideas – Ed]

Hi Kurt,

Which version of Dante are you using? This should be fixed in the latest version.

– Ed

[ronin]

this was a couple of months ago, so i will update and check.

thanks mate! Kurt

[Kyle – SUPPORT]

Thanks, let us know how you get on

– Kyle

[manfredbrandstaetter]

Dealing with a similar issue so I use this post and hope it is o.k.

“… but in IE, when you hover, it doesn’t reveal the “back”, it just reverses the front like a mirror.”

This Issue appears on Window Smartphone IE 11 with the animated text boxes
http://scribble-diemethode.de/
(the section with the circles when yo scroll down the start page: Herausforderung, Veränderung)

We are using Dante Version 3.02.

Thank you so much in advane!
Warm wishes!

[Swift Ideas – Ed]

Hmm, it’s because you have the front transparent. Not sure IE is capable of hiding that. Try this css:

.browser-ie11 .sf-icon-box-animated .back {
backface-visibility: hidden;
}
.browser-ie11 .sf-icon-box-animated.sf-hover .back {
backface-visibility: visible;
}

– Ed

[manfredbrandstaetter]

Hi Ed,

thank you so much again!
I really appreciate your help!
Have a nice day 🙂

[Mohammad – SUPPORT]

Hi,
We are glad 🙂 that your issue resolved. Great thanks to Ed.
-Mohammad