하면,만약,만약...

    원 효 과 는 http://smashingconf.com/
 
    주요 점:
 
 

<li>
      <a class="image-link" href="http://smashingconf.com/speakers/lea-verou">
        <img src="http://smashingconf.com/content/02-speakers/00-lea-verou/lea-verou.jpg" width="195" height="195" alt="Lea Verou">        <span class="caption">
          <span class="name">Lea Verou</span>
          <span class="talk">
            TBA          
          </span>
        </span>
      </a>
</li>

 
   a:
 

.speakers-grid li a {
  position: relative;
  display: block;
}

 
   li:
 

.image-grid li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0 2% 2% 0;
  width: 23%;
  line-height: 0;
}

  
 
 
 
 
   img:
 
직접 img 용 border-radius:50%

물론 img 에 도 border:10px solid\#e6f4fd 가 있 습 니 다

.image-grid img {
   width: 100%;
   height: auto;
   border-radius: 50%;
   border: 10px solid #e6f4fd;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   -moz-transition: border ease .3s;
   -webkit-transition: border ease .3s;
   -o-transition: border ease .3s;
   transition: border ease .3s;
}