Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 hover effect not working on firefox

I am working on a css based hover effects. However the effects are perfectly working in chrome but not in firefox version 26. here's the
http://jsfiddle.net/gfxbucket/Bz3E8 Any help would be greatly appreciated. Thanks.

/* Caption Style 4 */
.team-grid li {
    -webkit-perspective: 1700px;
       -moz-perspective: 1700px;
            perspective: 1700px;
    -webkit-perspective-origin: 0 50%;
       -moz-perspective-origin: 0 50%;
            perspective-origin: 0 50%;
}

.team-grid figure {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.team-grid figure > div {
    overflow: hidden;
}

.team-grid figure img {
    -webkit-transition: -webkit-transform 0.4s;
       -moz-transition:    -moz-transform 0.4s;
            transition:         transform 0.4s;
}

.no-touch .team-grid figure:hover img,
.team-grid figure.cs-hover img {
    -webkit-transform: translateX(25%);
       -moz-transform: translateX(25%);
        -ms-transform: translateX(25%);
            transform: translateX(25%);
}

.team-grid figcaption {
    height: 100%;
    width: 60%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
       -moz-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
       -moz-transition:    -moz-transform 0.4s, opacity 0.1s 0.3s;
            transition:         transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .team-grid figure:hover figcaption,
.team-grid figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
       -moz-transition:    -moz-transform 0.4s, opacity 0.1s;
            transition:         transform 0.4s, opacity 0.1s;
}
like image 363
user3104372 Avatar asked Mar 22 '26 15:03

user3104372


1 Answers

Well your fiddle works perfect on my FF26 Mac.

Although, you're missing a closing / on the img in the html. Could that have something to do with it if your're running an xhtml strict doctype maybe?

Best of luck!

like image 123
PatrikJarl Avatar answered Mar 25 '26 05:03

PatrikJarl



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!