Extreme CSS, Learn Twitter Bootstrap 3, PHP Code Snippets, Demos, LESS, SASS and HTML5

As there is a Trends of Rounded Avatars in Blog Comment Area with Some other Beautiful Transitions Using CSS3
The Rounded Avatar is Not by Cropping Image in Circle it Acatally Masking Image in Circle.
CSS Code:

.avatar-box{border: 2px solid #c7b89e;}
.avatar-box,.avatar-box img{
 width: 50px;
 height: 50px;
 -webkit-border-radius: 30px; /* Saf3+, Chrome */
 border-radius: 30px; /* Opera 10.5, IE 9 */
 /*-moz-border-radius: 30px;  Disabled for FF1+ */
}

Demo :

The Beautiful Rose Hair Style images is Delivered by Share U Like

The using of Javascript for Hover is Old Now. Now you can render faster than javascript and also run on No Javascript Mode.

CSS Code:

#mainwrapper {  
  font: 10pt normal Arial, sans-serif;  
  height: auto;  
  margin: 80px auto 0 auto;
  text-align: center;  
  width: 660px;  
}  

#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 172px;
    float: left;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    width: 300px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}

#mainwrapper .box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
	width: auto;
	height: 100%;
}


#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 280px;
    height: 152px;
    text-align: left;
    padding: 15px;
}

#mainwrapper .box:hover .fade-caption {  
    opacity: 1;  
}

Output : The Above Images Pick from Wallpaperology.com
Please Follow For More Intresting Code in CSS3