Foto de perfil con efecto hover y botones a redes sociales

¿Cómo va la semana? Espero que bien. Bueno, pues hoy vengo con un nuevo tutorial para nuestros blogs. Visitando diversos blogs, he notado que muchos colocan su foto en la sidebar (barra lateral) del blog. Así que hoy traigo un tutorial para darle un efecto muy bonito a las fotos de perfil que colocamos en la sidebar.

Ahora, ¿de qué trata el efecto?. Es muy simple y útil. Al pasar el cursor sobre la foto, se hará un efecto como si alguien volteara la foto y viera el reverso. En ese reverso podemos colocar información extra ( como nuestro nombre, alguna información sobre nosotros, nuestro país, edad, etc.) y también podemos colocar enlaces a nuestras redes sociales. Yo he colocado cuatro íconos a redes, pero pueden cambiar los íconos por otros y/o agregar más redes.

Aquí pueden ver la demo:

↪DEMO
(Pasar el cursor sobre la imagen)

Ahora a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos los siguientes estilos CSS:

<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-URL-FOTO-PERFIL");
}
.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>

» Donde dice AQUI-URL-FOTO-PERFIL colocaremos la url de nuestra foto, previamente alojada. Debemos tener en consideración que la foto debe tener como mínimo un tamaño de 220x220px.

3.§ Damos a Guardar.

4.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Pegaremos el siguiente código 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'></div>
<div class='ch-info-back'>
<h3>NOMBRE-AUTOR-BLOG</h3>
<p>DESCRIPCIÓN</p><a href="AQUI-ENLACE-TWITTER" target="_blank"><img title="Sígueme en Twitter" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4J4rT7cx6IYcjHrTnc1u7DpTrjOfbUh0ndEK8a8g-zBfM_vtk8rxNa_YHvz964xR_Qupb5o8q7q_eAh1JuYLzTneUb8-Byr-8NMA0Jw2su0z-lfg-pCeiikjN1OQUAOOtHc3Gwg96_to/s1600/Twitter-diyvapng.png" /></a><a href="AQUI-ENLACE-YOUTUBE" target="_blank"><img title="Estoy en YouTube" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a><a href="AQUI-ENLACE-FACEBOOK" target="_blank"><img title="Sígueme en Facebook" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a><a href="AQUI-ENLACE-PINTEREST" target="_blank"><img title="Sígueme en Pinterest" widht="28" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/s1600/Pinterest-diyva.png" /></a>
</div>
</div>
</div>
</div>
</li>
</ul>

» Reemplazamos las URL por las distintas URL de nuestras redes sociales. Podemos agregar más o quitar algunas. Damos a Guardar.
Si tienes alguna duda, puedes hacerla en los comentarios.

¿Te gustó el efecto?

Visto en : Tympanus