NearVillalobos

Hola amigos, hoy vengo a compartir con ustedes una plantilla que encontré en la red y como realmente me encantó quiero compartir con ustedes, la plantilla en cuestión se llama "donface" y pueden ver un demo del mismo

DEMO

DESCARGAR

Si les pide contraseña para descomprimir es ésta

(ajmrdesign)Qh3^L8h=-)12m*|4f(C1Oiyx$}fYLg

Para los íconos sociales hay que entrar en diseño y añadir estos enlaces de abajo, los enlaces a la redes sociales.

<a class='iconos icono1' href='javascript:void(0);'>Twitter</a>
<a class='iconos icono2' href='javascript:void(0);'>Pinterest</a>
<a class='iconos icono3' href='javascript:void(0);'>Google plus</a>
<a class='iconos icono4' href='javascript:void(0);'>Facebook</a>

Eso es todo, por favor respeten los el CopyRight que puso el creador de la plantilla, repito, no son míos sino del creador del tema,

Plantilla para imagenes de Facebook!

Leer +

NearVillalobos

Bueno después de un largo tiempo de ocupaciones vuelvo a publicar algo, se trata de otro álbum para los que usan muchas imagenes en una sola entrada pero la peculiaridad de este es que muestra por cada sección 3 imagenes, puede ser útil para muchas cosas como por ejemplo si tienen un blog de imagenes pueden hacer una sección con este álbum y por cada elemento colocar tres imagenes correspondiente a esa categoría, si es naturaleza entonces de plantas, si es de fauna entonces animales, de esa forma al darle click llevara a sus usuario a una entrada con todas las imagenes correspondiente a esa categoría, pero en fin, el uso que le den corre por cuenta de cada webmaster, yo solo les comparto mis creaciones n_n

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:

#multi-img {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    width: 910px;
}

.corte-img {
    background: #222;
    float: left;
    height: 184px;
    margin: 2px;
    overflow: hidden;
    position: relative;
    width: 222px;
}

.corte-img img {
    left: 0;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 0;
    opacity:1;
    z-index:10;
}

/******* Todas las propiedades que usan transition para regresar *******/
.corte-img img, .corte-img:hover img.zc, .corte-img > a, .corte-img span {
    transition: all 500ms ease-in-out 0s;
    -moz-transition: all 500ms ease-in-out 0s;
    -o-transition: all 500ms ease-in-out 0s;
    -webkit-transition: all 500ms ease-in-out 0s;
}
/**********************************************************/


.corte-img:hover img.zc, .corte-img:hover img.zb, .corte-img:hover img.za {
    opacity:0;
}

.corte-img:hover img.zb {
    transition: all 500ms ease-in-out 1s;
    -moz-transition: all 500ms ease-in-out 1s;
    -webkit-transition: all 500ms ease-in-out 1s;
    -o-transition: all 500ms ease-in-out 1s;
}

.corte-img:hover img.za {
    transition: all 500ms ease-out 2s;
    -moz-transition: all 500ms ease-out 2s;
    -webkit-transition: all 500ms ease-out 2s;
    -o-transition: all 500ms ease-out 2s;
    margin-left: -100px;
    margin-top: -70px;
}

.corte-img > a {
    display: block;
    height: 184px;
    line-height: 184px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index:50;
}

.corte-img span {
    color: #AFAFAF;
    font-family: Arial,Helvetica;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    position: relative;
    top: -60px;
}

.corte-img:hover span {
    opacity:1;
    top:0;
    transition: all 500ms ease-in-out 2.3s;
    -webkit-transition: all 500ms ease-in-out 2.3s;
    -o-transition: all 500ms ease-in-out 2.3s;
    -moz-transition: all 500ms ease-in-out 2.3s;
}

por ultimo la estructura html, ubiquenla en donde deseen el efecto:

 <div id="multi-img">


<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>


</div>

Eso seria Todo! 

Multi fade album CSS3

Leer +