JMiur [E]

Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.


La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.

Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
<div class="imgteaser">
<a href="javascript:void(0);">
<img src="URL_imagen" />
<span class="more">&raquo; Leer Más</span>
<span class="desc">
<strong>EL TITULO</strong>
....... el texto a mostrar .......
</span>
</a>
</div>
La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:
<style type="text/css">
.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
overflow: hidden;
position: relative;
width:600px; /* establecemos el ancho total (imagen + marco) */
}
.imgteaser a {text-decoration: none;}
.imgteaser a:hover {cursor: pointer;}
.imgteaser a img { /* la imagen en si misma */
background-color: #456; /* el color del marco */
border: none;
margin: 0;
padding: 10px; /* le ponemos un marco alrededor */
width: 580px; /* forzamos el tamaño de la imagen */
}
.imgteaser a .more { /* es el área traslúcida de LEER MAS */
background-color: #123; /* color de fondo */
/* las propiedades del texto */
color: #FFF;
font-size: 14px;
padding: 5px 10px;
/* transparencia */
filter:alpha(opacity=65); /* IE genérico */
opacity:.65; /* Firefox */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
/* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
right: 10px;
}
.imgteaser a .desc {display: none;}
.imgteaser a:hover .more {visibility: hidden;}
.imgteaser a:hover .desc { /* es el texto del caption en si mismo */
background-color:#345; /* color de fondo */
display: block;
margin: 0;
width: 580px; /* ocupará el mismo ancho de la imagen */
/* las propiedades del texto */
color: #FFF;
font-size: 12px;
padding: 10px;
/* transparencia */
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
/* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
left: 10px;
}
.imgteaser a:hover .desc strong { /* el texto LEER MAS */
display: block;
font-size: 14px;
line-height: 2em;
}
</style>


45 comentarios:

GOCASE  

Excelente y por enciam muy facil y practico.

Tu siempre con tus ideas y aportes tan frescos, adaptandosen a las necesidas o creando nuevas en todos nosotros.

Un saludo como siempre desde Colombia!!!

Responder
adrix  

excelente efecto, no lo conocia, resulta muy util si queremos explicar la foto.
saludos

Responder
Shark_Bloody  

JMiur, tengo un problema con una(si, es un caso único) imagen que no puedo subir a Blogger, eh intentado con otras imágenes y no hay ningún problema, pero cuando intento subir esta me salta el error, te dejo una captura:

[VER CAPTURA].

La aloje en Blogger para comprobar que el error no fuera general, y al parecer solo pasa con esa imagen, me dejo plasmado.

La imagen pesa 123 bites y esta en formato PNG, la aloje en skydrive para ver si el error con esa imagen era general pero no hubo ningún problema.

[VER IMAGEN REVELDE :D].

¿Tienes alguna idea de porque pasa? :O

Responder
ZonZo  

¿Me lees el pensamiento? Hace unos días buscaba la manera de colocar un caption a las imagenes subidas a través de blogger!!! (Y, claro está, no lo conseguí...)

Me han quedado unas dudas:
·¿Los CSS se agregan a la plantilla o tan sólo a la entrada?
·¿A qué te refieres con ponerlos en una sola línea? ¿Sin darle al intro?

Gracias!

Responder
Mar  

Precioso efecto! Bien, a jugar con el CSS ahora.

Gracias

Responder
Graciela  

Qué bello JMIUR!!!, parece no tan complejo :). Nos traes información para crear lo que uno suele ver por ej. en los diarios online y se pregunta cómo harán esto???...buen martes, hoy estoy con las antenas puestas he dormido como un ángel :D

Responder
Solidaridad  

Muy interesante y novedoso, Jamiur espero que estés bien, una pagina que continuamente visito de mi país de origen Colombia, tiene un menú en una entrada que se encuentra mezclado con lo ahí escrito , es decir que interactúa con efectos y palabras ¿ existe algún programa o código que me permita hacer eso en el blog?
Verdad Abierta

Responder
Elizabetha Souvre  

Hola disculpa que te moleste.

Me encanto este efecto para las imagenes!!!

Pero es otra cosa la que me trae aca, Gemma me dijo que te preguntara a ti. Lo que pasa es que quiero migrar mis feeds pero no solo me piden mi cuanta de gmail (no hay problema con eso) sino luego la de feedburner que se me olvidó y en ese recuadro no hay manera de pedir que me la manden.No se como recuperarla...¿me puedes ayudar? :0

Gracias por todo lo que haces por nosotros lo bloggeros ;P

LIZ

Responder
Elizabetha Souvre  

Oh! otra cosa..me encanta el formulario de comentarios en POP-UP...he tratado de implementarlo pero se agranda y se corre hacia un lado, no se porque...¿como lo busco en tu blog?

Graciasssss

LIZ :P

Responder
Jaime Trujillo Escobedo  

Jmiur, conocía varios efectos hover, similares a este pero no iguales, ¡¡¡está genial!!! Saludos ;)

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

como puedo eliminar la famosa Suscribirse a: Entradas (Atom)
muchas gracias x la respuesta

Responder
JMiur  

Creo que es bastante fácil de hacer, por lo menos, no tuve problemas para armarlo aún en un post. Vale la pena probarlo. A jugar se ha dicho :D

Shark_Bloody:
No recuerdo exactamente el valor pero, sé (creo) que hay una restricción en cuanto al tamaño de la imagen. No sólo en el máximo sino en el mínimo. Como esa imagen tiene sólo un pixel de alto, la rechaza. Para probarlo, la hice un poco más "alta", el mismo ancho pero de 10 pixeles de alto y la subió normalmente. No sé si 10 es el número mínimo pero, podrías probarlo. Como es un pattern pequeño, no habrá demasiada diferencia en el tiempo de carga.

ZonZo:
Exacto. Lo que ocurre es que al darle a intro, generas un código con un salto de línea así que la altura del DIV será mayor.

Solidaridad:
Si es lo que yo creo, se trata de un archivo de Flash, un SWF.

Elizabetha:
Pués lo de Feedburner no sabría decirte, ¿ingresando la URL http://feeds.feedburner.com/blogspot/plsN no es suficiente?
Lo del formulario, está en esta entrada y si eso no funciona, dime donde puedo ver el ejemplo online, aunque no ande así podría verificar si hay algún error.

WwW.FloWKaletA.CoM:
Quitando esto: <b:include name='feedLinks'/>

Responder
GOCASE  

JMiur ni tan facil para los inexpertos como yo, entiendo bn lo del codigo en una sola linea que dices, pero el problema llega con el CSS q debo de hacer con el?? colocarlo en la plantilla en que parte???

Mas instrucciones detalladas de como y en donde Gracias!!!!

Responder
Gem@  

Es una maravilla y la estética mucho más elegante que con texto sobre la imagen :)

Responder
JMiur  

GOCASE: Puedes hacer varias cosas.
Lo colocas en la plantilla, antes de </head>.
Puedes agregarlo en un post (si va en un post) y en ese caso, todo en una sola línea.
Puedes agregarlo en un elemento HTML y en ese caso no hace falta que vaya en una sola línea.

Gem@: Esa es la palabra, es muy elegante :)

Responder
GOCASE  

Siempre GOCASE con sus preguntas, JMiur lo que sucede es que en

http://gocase-otroblogdepruebas.blogspot.com/2009/05/leer-mas-el-titulo-mostrar-algun-texto.html

que fue donde probe este truco sucede que me toco disminuir tamaño para que no se saliera ya q mi palntilla no se puede agrandar, pero fijate que si te paras encima de la imagen lo que va dentro del LEER MAS no se posiciona bn y quedan unos espacion, en cambio si te situas encima de LEER MAS sale bien como deberia, como puedo solucionarlo???


Ademas JMiur en mi plantilla existe alogo q no me gusta ni poquito cuando te situas en cualquier imagen que publico esta se desplaza hacia la derecha y hacia arriba lo cual detesto, creo que es algun efecto para las iamgenes pero lo odio como lo suprimo para que las iamgenes queden estaticas???

Gracias, a la espera de que me respondas las dos inquietudes gracias.

Responder
GOCASE  

Creo que lo solucione igual date una pasadita y revisas si las lineas que elimine fueron las correctas o si quite algo necesario para la plantilla gracias.

Responder
Mar  

Bueno hemos jugado :D

No le he puesto marco sino borde ouset, y le he modificado la superficie de color por dentro al texto o si no se me iba sobre el blanco.

Bie, por ahora. Pero no me sale con imágenes verticales :(

Debería poder poner el CSS en la entrada en todo caso y modificarlo, pero todo en una sola línea... cada vez que leo eso, me "enervius".

Probaremos... como me dices siempre... con paciencia.

Hay un ejemplo
Aquí(Letra deriva por si no sale el enlace)
Buen día para tí

Responder
GOCASE  

De nuevo molestandote, ya solucione lo anterior o eso creo

en esta entrada:

http://elcielosabe.blogspot.com/2009/05/el-tiempo-no-perdona_13.html

Observa como queda el leer mas como hago para que quede bn en la esquina de abajo???

Gracias

Responder
JMiur  

GOCASE: La posición la puedes ajustar con bottom que está en dos partes. Cuanto mayor sea el valor, más arriba estará. Me imagino que un valor de 37px más o menos la ajustaría.

Mar: Quedó muy bien :D Lo de las imagénes verticales debería funcioanr pero, habría que hacer cuentas y ajustar los valores ... imagino.

Responder
Junio  

Sé que no es ésta la entrada en la que debía ir este comentario, pero... es tarde y estoy cansada. Sólo he entrado a revisar algunos blogs (entre ellos el tuyo) y he comprobado- con sorpresa-que aún no tenéis de vuelta la imagen del autor del comentario. Y es que hace mucho tiempo que había yo comentado por "mi casa" que Singpolyma lo hacía posible: ahora, una vez "retocado" el hack tras los últimos disparates de Blogger, vuelve a funcionar.
Y soy la única, al parecer, que tiene las fotos en los comentarios....

La verdad es que te escribo sobre este tema porque me sorprende muchísimo; porque otra cosa... ya sé que ni mi blog ni yo somos especialmente "populares" ;) (aunque a mi "idiosincrasia" no le importe demasiado, jajajajaaaa).

La verdad, cuando estamos en ésto es porque gusta compartir lo que logramos... igual es por eso que me ha dado ahora por comentarte (pero no te acostumbres: a partir de este mensaje seguiré igual de vaga para comunicarme, je).

Un saludo.

Responder
Elizabetha Souvre  

No se si se guarado mi comentariooooooooo :S estoy tan nerviosa con mi tesis que aprieto mal las teclas y se camb´ian las ventanas :o.

Si no se guardó lo pondré mañana nuevamente

Disculpa que te siga molestando, se que debí hacer esto hace mucho tiempo, pero la tesis me ha comido casi un año y casi no he existido :S

Gracias por responder :P

No sabes lo que personas como tu , Gemma y muchos más que visito en silencio por temosr a molestar como Rosa O Pizcos significan para nosotros los novatos

:D :D :D

Responder
JMiur  

Junio:
La verdad es que nunca usé ese truco, debe ser por eso que ahora tampoco :D Lo que no veo es donde es que está explicado; hubiera sido bueno dejar un enlace por si alguien está interesado en él.

Elizabetha:
Como ves, no hay mucho que pueda hacerse. De todas formas, lo seguro es que seguirá funcionando y en ese sentido, no tendrás problemas :)

Responder
Aretino  

siempre visito tu page aunque a beces no dejo comment. Pero esta vez quiero darle las gracias por ese efecto que hace rato buscaba.

Otro efecto que me gustaria concoer a ver si lo puedo aplicar en mi magazine es usar una imagen con el efecto de hoy pero ademas se pueden cargar ahí mismo varias imagenes.

Explicándome: colocar cuatro imagenes y se muestra una primera y si le das al numero dos se cargue la dos y así sucesivamente pero sin dejar de lado ele fecto posteado por usted.

De todos modos seguire pasando por aquí a ver que hay de nuevo y gracias por ser tan didáctico

Responder
JMiur  

Veré si veo algo similar a eso :)

Responder
Aretino  

Que falla dos errores en el comentario, Donde dice beces debería decir veces; concoer debe decir conocer y creo que hay otro. Mis disculpas

Responder
Mamots  

Una consulta
como puedo hacer para que me quede el texto como ati justo en laimagen?
he estado probando y me sale desplazado.

gracias

Responder
JMiur  

Mamots: ¿Tienes un ejemplo online donde pueda verlo? En genearl, se resuelve cambiando las propiedades bottom y left hasta ajustarlo. Si lo puedo ver, te digo.

Responder
Mamots  

Gracias lo voy a intentar en un blog de prueba que tengo y si no doy con la tecla te mando el enlace.

gracias por tu tiempo.

Responder
Carlos A. Costa  

El posicionamiento de “Leer Más” y del “texto subtitulo de la imagen” no parece ser invariable respecto del tamaño de la font que se usa en la plantilla. EN mi caso ajusté los valeros para que coincida con mi plantilla, pero se ven bien solo en Firefox, no en IE. ¿Sabes cual puede ser la causa?

http://flenning.blogspot.com/2009/05/celestino-antes-del-alba-de-reinaldo.html

Responder
JMiur  

Eso no parece ocurrir en IE8. Hasta ahora no tengo una respuesta pero seguiré mirando.

Responder
Claudio Gonzalez  

Un detalle, en el "texto del caption en si mismo" hay un padding de 10px entonce el width tiene que ser de X -20 para que quede lindo. Mi imagen es de 500px y el area del caption de 480. Saludos y gracias...

Responder
PROJETO NOVO IMPULSO  

La leyenda "LEER MÁS" desaparecidos ¿qué debo hacer?
ver aquí -- http://complicoumuito.blogspot.com/
Espero su respuesta
Abraços

Responder
JMiur  

Debes reducir el ancho para que se adapte al ancho de tu blog:

.imgteaser {
margin:0 auto;
overflow:hidden;
position:relative;
width:460px;
}

poner ese valor aproximado de width:460px; en lugar de width:600px;

Luego, hay otra cosa que debes hacer, debes eliminar los saltos de línea y escribir el código que va en el post , todo en una sola línea porque sino, Blogegr agrega esos slatos y el texto LEER MAS se verá muy pero muy abajo.

Responder
Romer Riera  

Un muy útil efecto para usarlo en miniaturas y decidir si se quiere o no ver la imagen completa.
Una pregunta Marginal jorge ¿Que diferencia hay entre este código y la "etiqueta" >Img Title="TEXTO"..

Responder
Romer Riera  

Seguir comentarios

Responder
JMiur  

No entiendo bien la pregunta ¿entre lo que muetra este post y el atributo TITLE de una etiqueta IMG?

Responder
MALINA  

Hola JMiur, sabrias decirme si se puede aplicar un css a todas las imagenes contenidas en un blog? ejemplo: imagen

Si no fuese posible a todas dentro de la misma plantilla, me podrias decir como hacer esa marca de agua (inferior) a las imagenes en misma entrada?

Un abrazo!

Responder
JMiur  

Malina:
Con CSS pueden darse propiedades a las imágenes pero para agregar una marca de agua o un texto, se requiere de algún código extra. Un ejemplo simple:

<div class="superponertexto">
<span class="eltexto"> EL TEXTO A PONER </span>
<img src="LA_IMAGEN" / >
</div>

y colocar el CSS correspondiente:

div.superponertexto {position: relative;}
span.eltexto {position: absolute;left:0;bottom:0}

Responder
MALINA  

JMiur he probado lo que me has dicho, (independientemente de lo publicado en la entrada) y aunque he variado los valores left y bottom, no me sale. El texto no se superpone.
Que hago mal?

Responder
JMiur  

Muéstrame un ejemplo, Malina y lo vemos; hay detalles que dependen de cada palntilla.

Responder
MALINA  

JMiur, no puedo mostrartelo ahora porque pobre en un par de blogs de prueba y al no salirme lo quite. Lo hice en una entrada y el css en la plantilla.
Tampoco era nada dificil lo que me dijiste de hacer

Te digo cuando me ponga otra vez con ello.

Responder
Vinilocura  

¡Hola JMiur!

¡Me encanta este tip! Hasta he creado una carpeta en marcadores con la mayoría de entradas sobre HOVER. Es genial.

Será una bobada, pero tengo un problema al usarlo. No consigo darle espacio a la derecha al texto a mostrar. Dejo aquí un ejemplo: http://puu.sh/a442

¡Gracias de antemano! Un blog enorme, como siempre.

Responder
Vinilocura  

Hey! Lo conseguí JMiur. Ya no hace falta :)

No entiendo la razón, pero al menos lo he solucionado. Encogí el WIDTH en ".imgteaser a:hover .desc" y ya está. Aquí: http://puu.sh/a46N

¡Gracias de igual modo! Un abrazo.

Responder
Andréa Smirna  

LOVE EFETO OBRIGADA

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR