HTML<ul class="ch-grid"><li>
 <div class="ch-item ch-img-1">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-1">&nbsp;</div>
 <div class="ch-info-back">
 <h3>Con amor</h3>
 <p>muchu gusto y placer presento<a href="http://tutorialgloriav.eklablog.com/">Gran tutorial</a></p>

CSS.ch-item { 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
cursor: default; 
height: 100%; 
position: relative; 
width: 100%; 
} 
.ch-info-wrap { background: transparent url(https://lh4.googleusercontent.com/-vQTWCguVppI/VH35HZyXvHI/AAAAAAABO8I/tP6PehMgG-k/w150-h140-no/1-150x140%2B%281%29.gif) repeat scroll 0 0 ; 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
height: 180px; 
left: 20px; 
perspective: 800px; 
position: absolute; 
top: 20px; 
transition: all 0.4s ease-in-out 0s;
width: 180px; 
} 
.ch-info { 
border-radius: 50% 50% 50% 50%; 
height: 180px; 
position: absolute; 
transform-style: preserve-3d; 
transition: all 0.4s ease-in-out 0s; width: 180px; 
} 
.ch-info > div { backface-visibility: hidden; 
background-position: center center;
border-radius: 50% 50% 50% 50%; 
display: block; 
height: 100%; 
position: absolute; width: 100%; 
} 
.ch-info .ch-info-back { background: none repeat scroll 0 0 #f6e6f3; 
transform: rotate3d(0, 1, 0, 180deg); 
} 
.ch-img-1 { background-image: url("https://lh3.googleusercontent.com/-vuIcl__v6iY/VH9UxgLLo7I/AAAAAAABPAw/G_l347ynhnE/w150-h140-no/2.gif"); 
} 
.ch-info h3 { color: #FFFFFF; font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px; 
height: 50px; 
letter-spacing: 2px; 
margin: 0 15px; 
padding: 40px 0 0; 
text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3); text-transform: uppercase; 
} 
.ch-info p { 
border-top: 1px solid rgba(255, 255, 255, 0.5); 
color: #FFFFFF; 
font-size: 12px; 
font-style: italic; 
margin: 0 30px; 
padding: 10px 5px; 
} 
.ch-info p a { 
color: rgba(255, 255, 255, 0.7); 
display: block; 
font-family: 'Open Sans',Arial,sans-serif; 
font-size: 9px; 
font-style: normal; 
font-weight: 700; 
letter-spacing: 1px; 
padding-top: 4px; 
text-transform: uppercase; 
} 
.ch-info p a:hover { 
color: rgba(255, 242, 34, 0.8); 
} 
.ch-item:hover .ch-info-wrap { 
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
} 
.ch-item:hover .ch-info { transform: rotate3d(0, 1, 0, -180deg); 
} 
.ch-grid { 
display: block; 
list-style: none outside none; margin: 20px 0 0; 
padding: 0; 
text-align: center; 
width: 100%; 
} 
.ch-grid:after, .ch-item:before { 
content: ""; display: table; 
} 
.ch-grid:after { 
clear: both; 
} 
.ch-grid li { 
display: inline-block; 
height: 220px; 
margin: 20px; 
width: 220px; 
}