Transform scale and border radius

Question

I try add hover effect to image and I have a problem.

In Firefox all is ok:

But in Chrome is a problem:

Here is my code:

<div class="photo">
   <img src="images/photo.jpg" alt="">
</div>



.photo {
   width: 200px;
   height: 200px;
   border: 10px solid $white-color;
   overflow: hidden;
   position: absolute;
   bottom: -50px;
   left: calc(50% - 110px);
   @include border-radius(50%);

   img {
     max-width: 100%;
     height: auto;
     @include scale(1);
     @include transition(.3s ease-in-out);

     &:hover {
       @include scale(1.2);
     }
   }
}

Seeing your `@includes` would be of help. – Aer0 Jan 19 '17 at 01:37 — Aer0, Jan 19 '17 at 01:37

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

for Chrome use prefixes for this specific use -webkit-transform: scale();

also add it to transition property

for the future read List of CSS vendor prefixes?

edited May 23 '17 at 12:33

Community

1
1

answered Jan 19 '17 at 01:39

malikowy

1
3

This is my mixins: `// Generic transform @mixin transform($transforms) { -moz-transform: $transforms; -o-transform: $transforms; -ms-transform: $transforms; -webkit-transform: $transforms; transform: $transforms; } // Scale @mixin scale($scale) { @include transform(scale($scale)); } // Transition @mixin transition($transition...) { -moz-transition: $transition; -o-transition: $transition; -webkit-transition: $transition; transition: $transition; }` – web_newbie Jan 19 '17 at 01:40
I have `-webkit-transform` and `-webkit-transition:` – web_newbie Jan 19 '17 at 01:46
You added prefixes for tansform, added for transition but didnt for transform scale check if this works http://codepen.io/malikowy/pen/VPPyyq formated it first in Atom for easier to read version, then saved with Prepros to check for errors, I deleted @include from scale mixin – malikowy Jan 19 '17 at 01:53

score 0 · Answer 2 · answered Jan 19 '17 at 07:24

    <style>
        .photo{
            width: 200px;
            height: 200px;
            border: 10px solid #fff;
            overflow: hidden;
            position: absolute;
            border-radius: 50%;
        }

        .photo img {
            max-width: 100%;
            height: auto;
            transition(.3 s ease-in-out);
        }

        .photo img:hover {
            transform: scale(1.2);
         }


    </style>

<div class="photo">
    <img src="images/photo.jpg" alt="">
</div>

Transform scale and border radius

2 Answers2