1

I'm working on a design and using CSS transform:scale, and transition. It works great in Firefox but in Chrome, Safari, and Opera its not working right. It is a circle zoom effect and in those browsers it goes into a square. Not sure what is going on and why it works in Firefox, but not other browsers.

Here is my CSS code:

    .picCircle { 
  max-height: 200px;
  max-width: 200px;
  overflow: hidden;
margin: 0 auto;
border-radius: 50%;
}

/*GROW*/
.grow img {
  transform: scale(1);
  -webkit-transition: all .85s ease;
     -moz-transition: all .85s ease;
       -o-transition: all .85s ease;
      -ms-transition: all .85s ease;
          transition: all .85s ease;
}

.grow img:hover {
display: inline-block;
 transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-0-transform:scale(1.1);
}

And here is the relevant HTML:

<div class="grow picCircle"><a href="/guest-rooms.htm"><img class="img-responsive" style="margin-right: auto; margin-left: auto;" src="http://bnbwebsites.s3.amazonaws.com/5076/shutterstock_61226425_600x600.jpg" alt="" width="600" height="600" /></a></div>
  <h2>Guest Rooms</h2>
  <p>Graceful Bed &amp; Breakfast Inn features six well-appointed bedrooms that are furnished with comfortable antiques.</p>
  <a class="btn btn-white" style="letter-spacing: 1.2px; margin-top: 25px;" href="/guest-rooms.htm">Learn More</a></div>

Link to website: http://newgracefulfullblue.mybnbwebsite.com/

Brent Nicolet
  • 345
  • 1
  • 5
  • 9

1 Answers1

0

This appears to be a duplicate of the question here: Webkit border-radius and overflow bug when using any animation/transition

Created a fiddle using the second answer to that question (added the CSS recommendation in that answer to the .picCircle rule): http://jsfiddle.net/nnvhacLe/1/

NOTE: in the fiddle, I also removed display: inline-block from the img.grow:hover rule.

Community
  • 1
  • 1
jaredloson
  • 86
  • 5