En Codrops nos tiene acostumbrados a estupendos efectos que invitan a ponerlos en práctica, uno de los últimos trata de una selección de efectos hover para añadir a imágenes y formar así una vistosa galería. En el menú superior de la demo podemos observar el resultado.

La falta de tiempo me impide probar los 10 efectos distintos pero no he podido remediar ver el resultado del ejemplo 3 y tocando un poquito aquí y allá los estilos ha quedado como la muestra con borde en las imágenes, sombra en el texto y cambiando el color de fondo.

Para conseguir un efecto igual nos situamos antes de ]]></b:skin> y añadimos los estilos, es ahí en los estilos dónde veremos las partes que podemos variar como por ejemplo color de texto y fondo para que sea acorde con el sitio.

.view {
    background-color:#FFFFFF;  /* fondo borde */  
    border: 10px solid #FFFFFF;  /* color borde */  
    box-shadow: 2px 3px 5px #696969;  /* sombra borde */ 
    cursor: default;
    float: left;
    height: 200px; /* alto de la imagen */ 
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* ancho de la imagen */ 
}
.view .mask, .view .content {
    height: 200px; /* alto del contenido es el mismo que el de la imagen */ 
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* ancho del contenido es el mismo que de la imagen */ 
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF;
    font-family: Georgia,serif;
    font-size: 12px;
    font-style: italic;
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
   background-color: rgba(0,0,0,0.6);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 { 
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
 -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
 background: none repeat scroll 0 0 #9C1813; /* Título */ 
  border-top: 1px solid #000;  /* color borde top título */ 
  border-bottom: 1px solid #000;  /* color borde bottom título */ 
  text-shadow: 0px 1px 1px #111; /* sombra título */ 
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
 background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ 
border: 1px solid #000;  /* color borde enlace leer más */    
    color:#FFFFFF; /* color enlace leer más */ 
    text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
} 
En un gadget de HTML añadimos lo siguiente:

<div class="view view-third">
<img src="Url-imagen" />
<div class="mask">
<h2>Título</h2>
<p>Cualquier descripción</p>
<a class="info" href="Url-enlace">Leer más</a>
</div>
</div>
En Url-imagen es el lugar para añadir la url de nuestra imagen y en Url-enlace pondremos la url del sitio a enlazar.
Henry Herrera

Soy el primero!!!!!!

Luego de la efimera emocion, te felicito por tu gran post.
Saludos Gemma

Responder
MAI

UY! yo la segun! jajaja
Ya sabes Gema que cuando me agobio me da por ponerme con códigos pero esta vez he cambiado totalmente de registro y he hecho uno personal. Si te digo que J te manda besitos... a Gra los últimos que le mandó fué de mariposa :) ya sabrás quién soy.
Con tiempo tengo que ver algun método para las imágenes en las entradas, necesito tiempo porque nunca me he metido con ese tema.
Ahora que me doy cuenta, en el footer tengo que hacer cambios y como siempre nombraros "a los dos"... Un abrazote. Te he echado de menos.

Responder
MAI
Este comentario ha sido eliminado por el autor.
Responder
MAI

Por cierto... porfa, pincha sobre mi perfil, no sale toda la información -blogs que sigo etc- excepto si me pinchas sobre mi misma desde mi propio blog... raro !!!!

Responder
Cocofansclub

Es maravilloso este efecto Gem@!y lo mejor es que no utiliza scripts voy a probarlo
Saluditos!

Responder
m.p.moreno

¡Qué efecto tan diferente a los que ya nos has ido mostrando! Felicidades Gem@ por el post y por la parte personal que te toca, espero que estos días los estés disfrutando. Un abrazo. :)

Responder
Beben Koben

WOW...
GEM@ SEXY HOVER
hehehe :D

Responder
Graciela

Genial Julia!
Hemos recuperado a nuestra amiga, la de los sábados :P ahora sí, de salidas con manzanas :) :)

Responder
Gem@

:: Hola Henry me alegra que te guste el post estoy de acuerdo que resulta muy vistoso :D

:: MAI no hacía falta tantas pistas jajajajaja una es cortita pero no tanto o te piensas que me había olvidado de ti??
Me alegra mucho verte de nuevo ¿te quedarás o nos abandonarás otra vez? bueno, lo que importa es que estás aquí y te vamos a ver y saber de ti con más frecuencia.
(Mira Graciela ya está preparando salida jajajaja)
Oye, lo del perfil estuve comprobando y si marco sobre el avatar o si marco sobre el nombre con los dos veo lo mismo incluido los blogs que sigues :) igual era algo pasajero.

:: Cocofansclub saluditos, me alegra que te guste :)

:: m.p.moreno muchas gracias por las dos cosas eres muy amable :)

:: Beben Koben saludos :)

:: Graciela estamos contentas verdad? al fin se ha dado cuenta que por aquí la queremos mucho :)
Lo de las manzanas que no falten :)

Responder
Cocofansclub

Una pregunta Gem@...probe con ponerlo en una entrada pero las imagenes me quedan pegadas y no logro separarlas ademas como podria hacer para poder usarlo en diferentes tamaños de fotos ya que el ancho y alto se establecen en el css,no se si me explico!;)gracias

Responder
MAI

Ahora que releo jajajj si! di demasiadas pistas! juas! apunto manzanas, chicas!
Debían ser mis cookies, unas veces me sale otras no, no se, que más da, que más da que! :D
Las vacaciones vienen genial de vez en cuando pero nonono mala hierba nunca muere! Sigo robándote codigos de vez en cuando, ya sabes, aunque la tengo casi casi a gusto. Esta vez no me voy a complicar demasiado.

Responder
depozoblanco

Buenos días. Lo que voy a comentar no correponde al post, pero no he encontrado ningún post relacionado. He realizado un blog en blogger sólo para lectores invitados, un área privada para una asociación cultural. He seguido todos los pasos, y he ido a configuración: he activado "No aparece en Blogger No es visible para los motores de búsqueda"; en permisos soy yo el único que lo tiene; y he añadido los lectores de la asociación (se añaden sus correos, y blogger les envía una invitación). Pues nada, que le he puesto un contador gratuito, y me encuentro con que me visitan lectores que deben ser desconocidos y no autorizados, puesto que son de Oviedo, País Vasco, etc, todos de provincias que están fuera de la zona de alcance de los componentes de la asociación. La pregunta es: ¿me faltará algo que activar, o es que esta opción de BLOGGER NO FUNCIONA?? Agradeceré que me echéis una mano, porque es una lástima que en este área privada, entren personas que no deben... Gracias como siempre, y saludos por tu trabajo.

Responder
del batitú

Hola Gem@ :) sabés lo que más me gustó de Codrops? su propio menú, esas letritas con la flecha punteada. Me gustaría con uno arriba y el siguiente abajo por ej. Te estoy dando trabajo? noo, seguro ya sabés cómo hacerlo, verdad? :D cariños

Responder
Karla

Así es, este aquipo de Codrops siempre se las ingenian para hacerlos delirar un rato y de paso volvernos un poco viscos..

Me imagino que estarás muy ocupada en tu nueva etapa, te deseo lo mejor y disfrútala al máximo, :))

;) Buen fin de semana!

Responder
Dj Rienda

Hola Gema, ¿me podrías explicar cómo hicieste el botón que expande las entradas de tu blog? es que no consigo que el botón entero cambie de color, solo consigo que cambie la flecha ▼.

GRACIAS.

Responder
Gem@

:: Cocofansclub, suele pasar eso que comentas porque en las entradas solemos ver el efecto en "Editar" y al ir cambiando altera el códigom tendría que ver el ejemplo online y quizás sería necesario añadir unos estilos para centrar o separar las imágenes.
Para que tenga distinto tamaño y como bien dices ya que el tamaño está definido en los estilos se hace necesario añadir otra vez el mismo proceso pero cambiando el nombre de los estilos y el tamaño, por ejemplo este se llama "view-third" y a otro ponerle "view-third2"

:: MAI decías algo de no complicarte??? jajajaja hace nada vi y respondí el otro comentario.
Ahora te complicas con otros jajajaja qué cosas!!

:: depozoblanco recuerdo una entrada de Vagabundia:
http://vagabundia.blogspot.com/2011/07/google-y-los-perfiles-privados.html
ahí habla sobre ese tema y llegaba a la conclusión no sé si en esa misma entrada u otra a algo que yo tengo muy claro y es que en internet no hay nada privado porque si fuera privado no estaría compartiéndose de una u otra forma :S

:: del batitú ese menú utiliza imágenes eso complica su creación a no ser que seamos unos manitas en el diseño.
Si te animas este otro es el mismo sistema:
http://gemablog-.blogspot.com/2008/10/men-css-con-efecto-hover.html

:: Hola Karla gracias por el comentario.
Los que si están ocupados son los nuevos padres yo lo que hago es disfrutarla que para eso están las abuelas ¿no? :D :D

:: Dj Rienda le añadí unos estilos al botón con efecto hover así:

a.toggleresumenpost {
---------------------
---------------------
}

a.toggleresumenpost:hover {
--------------------------
--------------------------
}

Karla Castañeda

...ahahh, ya no pasé por acá...

La verdad que sí, yo con la chiquita de casi 2 años, uy, con ella tengo para me mantenerme super ocupada, es super inquieta, parece changuita, sólo le faltan los pelos por todos lados jaja.. a todo se trepa, me ha sacado tremendos sustos, ya se abrió la barbilla, y le pusieron tres puntadas... en ese momento estaba bajo el cuidado de papá, por lo menos me sentí menos culpable :( aahh, pero que horror!

Uff, no hay que perderles la vista nunca...

Gem@

Y que lo digas Karla, los niños deben estar vigilados porque como se suele decir lo que no ocurre en un año puede ocurrir en un día y son tan rápidos!

Responder
Cocofansclub

Muchas Gracias Gem@ tenia alguna idea pero me quedaba claro,seguire probando;)
un beso

Gem@

Otro beso para ti Cocofansclub :)

Responder
del batitú

Gracias Gem@, veré si me las ingenio para adaptarlo a lo que quiero. :O
si tienes algún momento te hice una consulta en el post del 7/4/2009 :)
Y felicidades!!! por ser abuela :D
cariños

Responder
Gem@

:: del batitú ¡GRACIAS! voya buscar esa entrada porque pensaba que había respondido :S

Responder
Vicky

Estupendo! Gracias.
Ya quiero probarlo.

Responder
Gem@

:: Todo tuyo Vicky :)

Responder
Mariel Martinez

Hola Gema!
Es mi primera vez comentando (o pidiendo, en realidad ;) )y quiero en primer lugar felicitarte y agradecerte por toda la valiosa ayuda que nos brindás tan generosamente.
Me encantó este banner que proponés y lo quiero usar en mi blog, pero tengo un problemita: Lo hice primero en mi blog de pruebas y se muestra perfecto. Uso la misma plantilla que en mi blog público. Pero cuando lo quise poner en este último, aparece la imagen por un lado y todo lo demás debajo de ella como texto común. Repetí todo 3 veces y nada. ¿Qué podrá ser?
Desde ya, te agradezco enormemente por esto y por todo lo tuyo!

Responder
Mariel Martinez

Otra vez yo!
No te molestes, Gema...
Ya lo solucioné... y solita! :)
Era el código para ocultar la navbar que interfería, porque al pegar el código para este banner, me quedó la llave del otro código al final. Bueno, no sé si me explico, pero lo importante es que funciona genial!
Mil gracias y un besote!

Responder
popcorn

Que pasa a lo hora de quere aplicarlo en una pagian estatica? :S Ademas cuando intente aplicarlo a mi blog no funcionó :(

Responder
Julia Yuste

:: Mariel Martinez no respondí porque vi tu comentario que ya lo habías solucionado.
Te explicas perfectamente :D

:: popcorn en las páginas estáticas no debería pasar nada porque también se puede añadir html.
El problema que tienes no puedo saberlo si no lo veo :S

Responder
popcorn

No te preocupes, fue error mio ubique mal el codigo, lo he probadio nuevamente y ha funcionada C:

Responder
popcorn

Mi problema es ahora el texto de descripcion... está negro, no se ve y no estoy segura cual es lugar para modificarlo, porque tengo casi todos los codigos en blanco.

Responder
Julia Yuste

:: La descripción la tienes en:
.Header .description {
font-size: 140%;
color: #ffffff;
}
Por lo que veo está en color blanco asegurate que cuando subiste la imagen marcaste para que el texto no quedara detrás de la imagen.

Responder
Mariel Martinez

Hola Gemma de nuevo!

Perdoname que te haga una preguntita fuera del tema de este post.
Resulta que me entusiasmé haciendo gifs animados de películas, etc. El caso es que como sabía que rara vez Blogger los acepta, los subí a Google Docs. Al llevarlos a Blogger funcionan por un rato y después... PLOP! Desaparecen... :0
Intenté en Imageshack porque una vez había subido otros y andaban bien, pero ahora sólo se puede ver la imagen inicial del gif que queda estática.
La preguntita es si sabés de otro lugar para alojarlos y que sea más o menos fiable en cuanto al resultado final (léase: que funcione en Blogger y no se esfume después de un rato)

Como siempre (en público como ahora, o en mi intimidad) GRACIAS!

Responder
Gem@

:: Hola Mariel, hasta donde yo sé esos problemas que había de alojarlos porque quedaban estaticos ya fueron solucionados hace tiempo.
Si te ocurre al subirlos en una entrada prueba a subirlos directamente al álbum de Picasa asociado con ese blog.
Porqu eno sé si sabrás que las imágenes que subimos a Blogger van a un álbum de Picasa, puedes acceder con tu mismo cuenta de Blogger :)

Responder
Mariel Martinez

jijijiji... Es mágico tu blog, Gemma...!!

Las dos veces que te pregunté algo, después todo funcionó normalmente! :)
Probé de nuevo (después de leer tu respuesta) de subirlos directamente a Blogger, pero no como hacía antes desde el HTML, sino desde "Redactar" y funcionó! No sé si tendrá algo que ver eso. Después, otro gif no funcionaba... hasta que se me ocurrió marcar como "tamaño original" y otra vez la magia! ;)
Y siguen mostrándose bien, lo compruebl obsesivamente cada media hora... jajajaja

Así que, de nuevo millones de gracias por tu amabilidad, Gema...!!!
Besos

Responder
Gem@

:: Pregunta Mariel, pregunta lo que haga falta que si así todo te funciona pues estupendo jajajaja

Responder
aaron marquez

oyes ese efecto se lo podria poner a todas mis entradas por defecto osea que una ves que la publique me salga ese efecto.
saludos y ojala y si se pueda.

Gem@

Si te refieres que el efecto sea algo automático y se añada a las imágenes de los post no es posible. Pero si que puedes añadir el html en las entradas y mostrar tus fotos con este mismo efecto.

Responder
May

Gem@ ¿Es posible hacer esto con videos? (un ejemplo como los de JMiur).
Si es posible, ¿me dirias como? :D
Saludos ;)

Gem@

Hola May, sé que JMiur les da una presentación genial a los vídeos y si no me equivoco incluso ofreció una serie de entradas con el tutorial sobre la forma de hacerlo.
El camino más corto sería preguntarle a él porque estuve buscando y no doy con la entrada que te decía :S

May

Hola Gem@, Disculpa, no me explique bien.
A lo que me referia es que quisiera hacer lo siguiente:
-Cambiar el leer más por Reproducir (ya lo domine)
-Al reproducir que se habra una ventana modal (eso es de lo que hablaba al mencionar a JMiur).
-Y que se reproduzca.
A eso queria llegar.. Si pudieses ayudarme te lo super agradeceria.
Saludos

PD:Gracias por avisarme de las entradas de JMiur ya le preguntare!

Gem@

Para eso es imprescindible estar usando alguna ventana modal, una vez la tenemos añadimos a ese enlace el código de nuestra ventana por ejemplo el mismo que cuando una imagen pequeña enlaza la grande que se verá en la ventana.

Responder
Coco Travel & Adventure

Hola, Gema, ¿podrías echar un vistazo en la plantilla de www.cocotraveladventure.com? He colocado el efecto 10 de este slide, pero no funciona. He revisado minuciosamente los códigos aplicados y no doy con la causa de que los cuadros permanezcan estáticos.
Gracias por tu tiempo y atención.
Un abrazo.

Gem@

Lo veo perfecto en tu blog!!!! ¿llego tarde verdad?

Responder
Jairo Leandro

Me encanta este efecto, sería hacerlo en wordpress? ¿Sabes cómo hacer el efecto que tiene escoladinheiro.com el final de la página?
También hay un efecto de cambio de imagen al pasar el ratón.

Gem@

Hola Jairo :)
Sobre WP imagino que si puede hacerse pero no se cómo :S
Mira la página del autor de este efecto, en ella muestra distintos modelos de efectos y creo que alguno muy parecido al que comentas.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top