html - Image overlapping on border in Safari -
this has stumped us. think first time ever did image container border-radius: 50% , image inside resizes in scale when rollover. managed keep image in container image still overlaps border of container. please see link reference.
a { display: block; height: 160px; width: 160px; } .image-wrapper { border: 6px solid red; display: block; border-radius: 50%; height: 100%; overflow: hidden; position: relative; z-index: 99; } a:hover img { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } img { transition-property: all; transition-duration: 1s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-backface-visibility: hidden; -webkit-transition-property: all; -webkit-transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
note: cannot assign border on tag contain other things other image itself.
Comments
Post a Comment