Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

image transition not working with jquery image centered

image transition not working with jquery image centered

Problem

I have one question about image transition for my script.

This is my DEMO page

In this demo you can see the hover over image transition effect. It is working greate Chrome, Mozilla firefox but not working Safari browser.

I am using this css code for image transition:

.abo_im img {
  width:100%; 
  -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.abo_im:hover img {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

this code working with transition but if you check it safari browser then you see image centered not working.

and if i remove this line:

-webkit-transition: all 1s ease; /* Safari and Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -o-transition: all 1s ease; /* IE 9 */
        -ms-transition: all 1s ease; /* Opera */
        transition: all 1s ease; 

from .abo_im img {}

image centered working. Can anyone help me here ?

Problem courtesy of: innovation

Solution

I fount the solution

I changed this:

-webkit-transition: all 1s ease; /* Safari and Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -o-transition: all 1s ease; /* IE 9 */
        -ms-transition: all 1s ease; /* Opera */
        transition: all 1s ease; 

to this

-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;

now my problem is fixed.

Solution courtesy of: innovation

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

image transition not working with jquery image centered

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×