Hacer Efecto Hover - Imágenes de Redes Sociales

BIENVENIDOS

Para comenzar crearemos una imagen con nuestros iconos, en Photoshop o el que les guste. En este ejemplo, los iconos de arriba serán los visibles y los de abajo serán el efecto hover.



Aquí les dejo la imagen terminada en fondo transparente.



Y mide 180 px de ancho por 120 px de alto.
Los iconos visibles miden 47 x 47 px y los de abajo 54 x 54 px esto es para que coincida con cada bloque de 60 x 60 px.



Para hacer lo mas fácil les muestro como seria nuestro sitio de trabajo de 60 x 60 px y el punto de referencia para posicionarnos en cada icono, usando coordenadas x y y


Cita: Mostrar

Y es hasta mejor ya que nos ahorramos muchas imágenes y códigos por hacer. 

Bueno Ahora Agregamos los codigos CSS y HTML para que nuestros iconos funcionen

Código CSS
Cita: Mostrar


Ponemos el siguiente código en donde ustedes quieran que le salga 
Código HTML
Cita: Mostrar


Aqui les dejo la Demo para que la aprecien  

Eso a sido todo espero que le haya gustado este pequeño y fácil tutorial de Efecto Hover con CSS y HTML.
Hasta la proxima
Hacer Efecto Hover - Imágenes de Redes Sociales
27 Puntos Score: 5.4/10
Visitas: 3226 Favoritos: 10
Ver los usuarios que votaron...
11 Comentarios Hacer Efecto Hover - Imágenes de Redes Sociales
Gracias por la info, muy ?
Esto en BBcode imposible ?
Manda la versi?
@issue2b imposible en BBcode jeje olv?
muy bueno amigo gracias por compartirlo
@Allterman @issue2b @Inicuo @Innocence @FRAVIER2
Gracias a todos ustedes por comentar y por darme esa info ya que no lo sabia.
Respecto a lo de animaci?
pregunto! no es eso imagen de sustitucion? jajaja digo, para hacerla mas rapido y no escribir tanto codigo
esta genial el efecto gracias por compartir
@rodrigo357
pues que pasa con la sustituci?
@MemooG Esta Bueno el  efecto     +2
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!