Foto de perfil con botones a redes sociales

• Torpona_Soy

  Tutoriales para torpes
  

Hola:) Os voy a enseñar a hacer esta imagen con vuestras redes sociales...
 Necesitamos una imagen 220 x 220Ia ur de esta imagen
                          una vez tengamos la ur de la imagen la tenemos que meter en este codigo 
<style type='text/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(/URL/index.html) 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 #ffffff;
transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
background-image: url("aqui tu ur de la foto ");
}
.ch-info h3 {
color: #000000;
font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px;
height: 22px;
letter-spacing: 2px;
margin: 0 15px;
padding: 30px 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(0, 0, 0, 0.5);
color: #000000;
font-size: 12px;
font-style: italic;
margin: 0 30px;
padding: 5px 3px 10px 3px;
}
.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;
}
</style>