I've been attempting to achieve a similar effect to this tutorial at http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. However, I'm encountering issues with getting the reflection of the image to display properly in IE and Firefox. Here is the code that I have so far: http://jsfiddle.net/srvcm/1/. Is there any workaround or trick to make Firefox cooperate?
.ex img {
<!--margin: 25px;-->
opacity: 0.9;
border: 1px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
.ex img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.7)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Your help is greatly appreciated. Thank you.