html - border-radius appearing under image -
building gallery , border radius around anchors not cropping image. , can't see why.
this html
<div id="portfolio_page"> <div id="portfolio_wrapper"> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"></a> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a> <a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="my caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a> </div> </div>
and here's css
#portfolio_wrapper{ width:100%; text-align:center; } #portfolio_wrapper { border-style:solid; border-radius:50%; padding:2px; text-decoration: none; display:inline-block; width: 150px; height: 150px; margin: 10px; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; background-image:url('img/image-2.jpg'); background-color:#cccccc; } #portfolio_wrapper a:hover { opacity: .7; -webkit-transform: scale(1.05,1.05); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99; }
i don't know else have put more details able post question. appreciated.
try add overflow:hidden
anchors:
now outsite border-radius
(the overflowing image) hidden.
Comments
Post a Comment