Esta sería la parte CSS común:
#contenedor {
position: relative;
}
.miniatura{
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}
position: relative;
}
.miniatura{
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}
La primera utilidad que se me ocurre es que haya dos imágenes iguales y la primera se muestre más pequeña para que el hover funcione a modo de ampliación de miniatura.
<div id="contenedor">
<a href="javascript:void(0);" class="miniatura">
<img src="URL_IMAGEN" alt="" style="width:100px;" />
<span><img src="URL_IMAGEN" alt=""/></span>
</a>
</div>
<a href="javascript:void(0);" class="miniatura">
<img src="URL_IMAGEN" alt="" style="width:100px;" />
<span><img src="URL_IMAGEN" alt=""/></span>
</a>
</div>
Lo único a destacar en este HTML es que las dos direcciones de imagen son idénticas (es la misma imagen), pero la primera incluye un WIDTH para forzar su menor tamaño. La segunda, en este caso y en los siguientes, siempre estará "rodeada" por un SPAN para provocar el efecto HOVER.
Otra forma de utilizar este CSS, sería para simular un rollover sin utilizar JavaScript.
El código HTML sería el mismo de antes, pero sin incluir ningún WIDHT y utilizando una segunda imagen, que en este caso era la misma pero invertida.
<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span><img alt="" src="URL_IMAGEN2" /></span>
</a>
</div>
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span><img alt="" src="URL_IMAGEN2" /></span>
</a>
</div>
Podemos aprovechar este mismo codigo para mostrar una información adicional, complementaria o incluso un detalle, con respecto a la imagen base.
En esta ocasión, no ha sido necesario utilizar el WIDTH, puesto que las dos imágenes ya las hemos construido del tamaño que nos venía bien. No obstante, se podrían haber redimensionado como antes sin problemas.
Otra posiblidad más. Ahora sustituimos la segunda imagen por un texto y añadimos estilo al SPAN.
<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span style="background:#ffffff;padding:10px;">Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas.</span>
</a>
</div>
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span style="background:#ffffff;padding:10px;">Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas.</span>
</a>
</div>
Para un efecto algo distinto, podeis cambiar en el CSS, los valores de TOP y LEFT, de manera que el segundo elemento, salga desplazado con respecto al vértice superior izquierdo del primero.
En fin, ahí queda la idea y que cada cual le de el uso que necesite. Y si se os ocurren más ¡no dudeis en comentarlo!
Nota: ¿Esto te viene bien Jaime? ;)
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Pues hombre... te pasaste!!! claro q esta excelente tu tutorial, ahora a echarlo en mi sopa de codigos, gracias Oloman =)
ResponderEliminarEs genial poder echar mano de un truco así para blogger, había visto aplicaciones similares pero nunca tan bien expuestas dan ganas de ir hacer fotos :D
ResponderEliminarSaludos !
me podrias promocionar mi blog no tiene publico te pido por favor piensalo y responde¿?
ResponderEliminarJaime y Carolum, como dice un amigo "menos es más". Sin resultar espectacular, el codigo es muy sencillo y ocupa poco.
ResponderEliminarFrancesco, ya te he contestado en los otros tres mensajes anteriores: no me dedico a promocionar nada, ni siquiera lo mío. Lo siento.
ola, tenia rato que no pasa poraqi pero me gusta el nuevo cambio de letra en las entradas :)
ResponderEliminarMuy bueno!!!demasiado simple y sencillo!! ponemos este post en favoritos, gracias Oloman!
ResponderEliminarCHICken, pues que sepas que me ha costado hacerlo. Y de hecho todavía ando haciendo cambios en eso. No me veo sin mi Comics, pero también es cierto que ya me había aburrido.
ResponderEliminarLuzdeLuna, encantado de verte por aquí :D
Hola, Oloman, la verdad soy muuuy bruta y no sé dónde poner el primer código. ¿Me ayudas?
ResponderEliminarEl primer código lo tienes que poner antes de /b:skin. Entre las etiquetas SKIN es dónde va siempre toda la parte de estilo o CSS
ResponderEliminar¡¡Wow, gracias!! Ya quedó, la otra vez lo intenté y nada mas no pude. Vales mil, besos.
ResponderEliminarCADA DIA SE APRENDE ALGO NUEVO, EXELENTE COMO SIEMPRE
ResponderEliminarPues sí. Siempre hay alguna forma nueva de utilizar lo de siempre ;)
ResponderEliminarHola al paleto de turno le gustaría saber si este código lo puedo meter en un gadget o en una entrada directamente o tengo que meter el codigo en lo de edicion de plantillas
ResponderEliminarHola San Francisco. De paleto nada, que aquí quién más y quién menos, a todos nos queda mucho por aprender ;)
ResponderEliminarSobre la pregunta, si lo vas a usar más de una vez, te conviene poner el código CSS en la plantilla. Luego, la parte HTML la pondrás individualmente para cada imagen, allí dónde quieras que aparezca: en una entrada, en la cabecera, en la barra lateral...
Si sólo lo vas a usar esporádicamente, se puede meter todo en cada entrada que sea necesario. Lo único que tienes que tener en cuenta en este caso es que todo tiene que ir seguido, sin saltos de línea.
hola! un efecto muy bonito!
ResponderEliminarmi pregunta es si hay forma de hacer una secuencia de fotos con este efecto, es decir, en una misma entrada poner varias fotografías, unas al lado de otras (tipo galería). Lo he intentado pero siempre se colocan unas debajo de otras.
Un saludo y gracias!
Moblelar, para que se queden en la misma línea tendrás que meter todas las imágenes dentro de un solo DIV CONTENEDOR. Si pones cada una en uno, siempre habrá un salto de línea tras cada una. También deberás evitar saltos de línea insertados por tí o por tu editor de entradas. Y por supuesto, todas tienen que caber dentro del ancho disponible.
ResponderEliminaresta muy bueno el efecto man... pero mi pregunta es, se puede crear una lista de imagenes en secuencia ( en un orden horizontal, no solo vertical) .... hay alguna forma ?
ResponderEliminarComentario #16 Ariasjk. Justo encima del tuyo :)
ResponderEliminarExcelente! muchas gracias!
ResponderEliminarHola se puede por ejemplo hacer eso con "leer mas"
ResponderEliminarosea que cuando pases el puntero se agrande esa frase?
si es asi explicame por favor que codigo me conviene
te aclaro que puse sumarios
ResponderEliminarEsto de aquí no te sirve para el leer más porque no se trata de una imagen Rodrigo.
ResponderEliminarSi quieres utilizar una imagen como enlace para "leer más", mejor ves este otro truco. Sólo tendrías que cambiar .jump-link por .leermas y funcionaría exactamente igual. También se explica cómo hacerlo usando sólo texto:
Modificar el aspecto del corte "Más información"
ALGUIEN sabe como eliminar automaticamente imágenes dentro del texto en blogger?
ResponderEliminarProblema: estoy publicando directo por email. Los emails a veces incluyen avisos no deseados al pie. Quisiera lograr automatizar que esas imágenes desaparezcan o al menos no sean inluidas en los RSS ya que los tomo desde otro portal.
Lo ideal sería reemplazar, pero sino se puede eliminar cualquier etiqueta <img o directamente transformar el artículo en texto plano nada más. GRACIAS!
¿Todas las imágenes de los posts? No sé si funcionará, pero prueba con .post img {display:none !important; visibility:hidden !important; width:0 !important; height:0 !important;}
ResponderEliminar.post-body img si es una plantilla de las del nuevo diseñador. Si tiene otra personalización, tendrás que encontrar que clase es la que corresponde en tu caso para las entradas.
Con esto, ¿Cómo pongo una imagen que dirija a una url con el efecto hover en una imagen?
ResponderEliminarEs el efecto de cuando pongo el cursor encima de la imagen cambie a otra imagen.
Abraham, no he entendido eso ¿lo que quieres es que al pasar el puntero por encima de una imagen, funcione como si fuera un enlace y se vaya a otra dirección?
ResponderEliminar¡Hola! He conseguido poner imágenes seguidas en horizontal tal como explicas en los comentarios, pero lo que me ocurre es que la imagen que reemplaza cada una de ellas me aparecen encima de la primera en lugar de aparecer encima de la que le corresponde, he probado varias cosas pero no consigo solucionarlo ¿alguna idea? Gracias.
ResponderEliminar¿Me pasas el link de la página dónde lo tienes puesto?
EliminarAquí es: http://cdobleweb.wordpress.com/el-equipo/
EliminarHe probado a modificar position en el css, pero nada.
Creo que en tu caso sería mejor otro sistema que se me ha pasado por la cabeza. Es muy parecido pero tendría que ponerme a hacer pruebas y ya que lo hago, lo publicaría para todos. El otro motivo es que me gustó mucho tu idea. A ver si saco un rato
EliminarDiculpa mi ignorancia. Este post parece brillante y es justo lo que busco pero no se como insertar el css. Debe insertarlo tal cual? pasa algo si ya tengo otro css en la misma página...?
ResponderEliminarmuchas gracias.
.J
Hola. El CSS en Blogger lo tienes entre las etiquetas SKIN de la plantilla y en las plantillas del nuevo diseñador también lo puedes añadir desde opciones avanzadas. Y no, un añadido no interfiere con el que ya tengas, salvo que use los mismos nombres de clases: .contenedor, .miniatura, etc. (Ver esto)
EliminarOtra cuestión: es posible situar imagenes (con el codigo que has compartido), una al lado de la otra, horizontalmente en una misma página?
ResponderEliminarajalá puedas ayudarme, muchísimas gracias
Este comentario tuyo se había ido al spam y lo he visto por las notificaciones del correo. Se ve que a Blogger no le gustan los comentarios muy seguidos ;)
EliminarSí se pueden poner juntas en horizontal, aunque complica un poco el código. De todas formas el código exacto dependerá de cual de las anteriores opciones quieras utilizar.
El rollover lo he logrado, pero me falta poder hipervincular las imágenes a una url, use la segunda opción. he probado con href= url antes del div pero me separa las imágenes y solo me vincula una de ellas a la url. Desde ya gracias por el aporte!!
ResponderEliminarHola. Esto es un poco de programación recreativa. Si quieres poner un enlace mejor usa este otro sistema
Eliminarbuen aporte saludos!!!
ResponderEliminarmuchas gracias, me ha servido de mucho.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarTendría que saber en cual de tus blogs estás probando para ver el código y si es posible adaptarlo, pero de todas formas, no lo veo necesario, ya que al entrar a ellos ya se advierte de que tienen contenido para adultos.
EliminarGracias por contestar, y si ya se que avisa antes, pero el problema es que tenemos varios tipos de imagenes y no todas son de mi gusto por eso me gustaria censuraralas.
EliminarEl blog es este: http://ecchi-anime-renders.blogspot.com.es/?zx=91d207a39038d57 y lo que me gustaria es aplicar este efecto en el indice donde estan las imagenes de los gatos que dice "+18"
¿Qué código usas para que en portada se cambie la imagen por la del gato? ¿Un JavaScript?
EliminarPégamelo aquí si no es muy largo, pasándolo primero a texto plano (tienes una herramienta en los enlaces de la izquierda si te hace falta)
No el gato no utiliza java,,,es una imagen sola, la posteo con tamaño 0 px, asi no sale en la entrada pero si en la portada.
EliminarOsea la estrucutura de la entrada es:
Imagen de gato
RESTO DE ENTRADA
y al utilizar el efecto de tu entrada en la imagen del gato no funciona, si quito el "more" si funciona pero sale toda la entrada D: ese es el problema
Ah, OK. Es que con ese sistema que utilizas no vas a poder usar este.
EliminarEl problema principal para solapar dos imágenes es que necesitas precisamente DOS imágenes y el sistema de sumarios que tienes sólo te captura UNA para la portada.
Tendrías que hacer sumarios sin JavaScript. Con eso creo que si podrías añadir a todas las entradas resumidas la imagen del gato
Ah con razon solo se veia una...y bueno ya lo arregle ^^
EliminarAhora publico la entrada sin el "more" y utilizo la condicional:
b:if cond='data:blog.pageType == "item"
Luego al rseto de la entrada qe quiero qe no salga en el indice le pongo el mismo div, y a ese div le aplico la condicional...uff me costo encontrar la manera pero lo logre.
Muchas gracias por todo
Pues de nada... Yo sólo te eliminé lo que no podía ser y tú lo hiciste :)
EliminarHola, gracias por el post lo primero.
ResponderEliminarEstoy desarrollando una barra de puntuación para hoteles, se trate de 5 estrellas, pero quiero que si se pasa el ratón por la primera estrella se cambie la primera estrella , si pasa a la segunda, que se cambie la segunda, y asi hasta las 5 estrellas.
Creo recordar que se podía hacer el cambio mediante los pixeles de la imagen, ¿me podrías ayudar? Gracias de antemano.
Mira, aquí tienes una de las muchas maneras que hay para hacer eso:
Eliminarhttp://codepen.io/rogie/pen/jgrIu
Hola, está muy bueno, pero me aparecen las dos imagenes, una al costado de la otra... Y no quiero utilizar sólo con html, porque no funciona bien, cuando entras por primera vez en el blog (PRIMERA VEZ AL DÍA) no cambia, hay que pasar dos o tres veces el mouse sobre la imagen, y ahí si anda... Pero queda re feo eso... Bueno, cualquiera de las dos cosas si puedes solucionarlas te agradeceré! Saludos!
ResponderEliminar¿Qué cosas nick? No entiendo lo que me quieres decir. Si lo pones en una página que lo vea incluso será más fácil que con sólo una explicación escrita.
ResponderEliminarHola, queria ayuda en un problema. He conseguido poner las imágenes en horizontal pero el efecto hover solo se produce en la primera de las imágenes... dejo el link para ver si me podeis ayudar: http://lamanadabeananimal.blogspot.com.es/p/shop.html
ResponderEliminargracias :)
Hola Isaac. A este selector añádele las dos últimas líneas que ves a continuacion:
Eliminar.miniatura {
z-index: 1001;
text-decoration: none;
display: inline-block;*display: inline;zoom:1;
position: relative;
}
solucionado! muchas gracias! :)
ResponderEliminarhola tendras una donde la segunda imagen se muestre arriba de la imagen miniatura, por favor, te lo agradeseria
ResponderEliminarHola Roci Min. Sería como el primer caso que explico aquí mismo, sólo que cambiando esta parte:
Eliminar.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
bottom: 100%;
left: 0px;
}
Como ves, en lugar de un top: 0; he puesto un bottom: 100%;
Simplemente estamos poniendo en otra posición la segunda imagen cuando aparece.
Este tema dónde lo puedo conseguir?
ResponderEliminarExcelente, muchas gracias!!!
ResponderEliminar