Opacity on hover not working in Chrome or IE

2 Views

Urg! I’m using a WordPress plugin to create boxes with an opacity effect upon hover but it doesn’t seem to work on Chrome or IE and instead they fades to opacity: 1 (100%) although I have modified the CSS to opacity: 0.2

Works well on Safari and Firefox but not Chrome or IE. Could this be a webkit issue?

Read More

Boxes below the slider: http://goo.gl/5IkgSF

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. That is because the opacity that you’re trying to change is within keyframes so you need to modify the keyframes or add new keyframes to override the plugin’s style.

    In the animate.css line 517 you can find the following code, change the opacity from 1 to .2 as the following and it will work fine.

    @-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: .2;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity:  .2;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: .2;}
}

@keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity:  .2;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    /* opacity: .2; */
}