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:

fiddle demo

now outsite border-radius (the overflowing image) hidden.


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -