I am using wordpress with "nextgen gallery" plugin (i guess its css problem and not plugin issue off-course, just mentioned what i am using).
I edited some of the hover code, this is what I've reproduce :
.ngg-gallery-thumbnail-box .ngg-gallery-thumbnail a img {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity .5s linear;
-moz-transition:opacity .5s linear;
width: 240px;
height: 160px;
display: block;
}
.ngg-gallery-thumbnail-box .ngg-gallery-thumbnail a img:hover {opacity: 0.8;
filter: alpha(opacity=80);
display: block;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
content: "\f067";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
color: #000;
width: 240px;
height: 160px;
font-size: 50px;
line-height: 150px;
background-color: rgba(255,247,102,0.4 ) !important;
background: url('imgs/hover.png') top left repeat-y !important ;
}
Url: click here to see thumbnails on the website
The problem: if you hover the thumbs with Chrome, you will see:
But on IE and firefox - its not working. The only thing that happend on hover in firefox is the opacity transition. Why?