La entrada de CSS-Tricks habla de expandir imágenes usando HTML5 pero claro, eso no es posible en cualquier navegador así que vamos a tomar la idea, simplificarla y tratar que funcione en Mozilla, Chrome y por lo menos en IE8 ...
Ejemplo 1En lugar de etiquetas de HTML5 vamos a usar el viejo y remanido DIV al que le asignaremos una clase CSS; adentro, colocaremos una imagen cualquiera que se redimensionará y ampliará al pasar el cursor por encima y eventualmente, pondremos un caption o texto aclarativo inferior dentro de una etiqueta SPAN:
<div class="figure"> <img src="URL_imagen"> <span class="figcaption"> el texto a mostrar </span> </div>
Y ahora las definiciones del estilo:
<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* el tamaño de la miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* algo de sombra en Mozilla y Chorme */
-webkit-box-shadow: 0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
}
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
}
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
}
</style>
<!-- y le ponemos algún hack extra para adaptarlo a Internet Explorer 8>
<!--[if IE]>
<style>
.figure {
/* rotamos el DIV */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738);
/* lo posicionamos como se pueda */
left:20%;
}
.figure:hover {
/* anulamos la rotación */
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1);
/* dimensionamos el DIV */
width:360px;
}
</style>
<![endif]-->
Ejemplo 2
16 comentarios:
Muy gueno Jmiur!
Hermoso! :D otro truquito para mis imágenes y van...
Si no le pongo nada de texto, no se ve con ese efecto tipo polaroid no? la podría ampliar mas veces tbm, a jugar! :P
Muchas gracias JMiur!!
Diviértanse :D
Sin texto, funcionará igual y la amplaición es a gusto, puede usarse cualquier otro valor.
Que bueno....!!!!!! me encantó...:) bueno para cuando me salga... el slide show.Una pregunta??? donde va esto en el post?? :$
El estilo, donde quieras. Puede ir en la plantillla o en un psot si es que lo vas a utilizar sólo eventualemtne.
Hola
Me gusto, pero no me funciona el hover. No pasa nada cuando se le pasa el mouse por encima. Alguien sabe el por que?
Salu2
Obviamente, porque tienes algún error pero, es imposible saber cuál a menos que muestres el ejemplo.
Pregunta.. hay alguna forma para hacer que al expandirse la imagen no se vea borrosa? ya que se pixela aunque sea una imagen de resolución alta. No se si me explique bien, ja
Si la URL de la imagen es la de la imagen de tamaño original, no se pixelará.
Hola, me salió.... pero.... siempre hay un pero, como puedo hacer para que me queden en vez de a una, tres en una misma línea, como en el ejemplo de css-tricks????
:)
Tendría que ver el ejemplo pero, imagino que deberás agregarle la propiedad float:left acá:
.figure {
..........
float:left;
}
Hola Jmiur, estoy probando el procedimiento en una plantilla rounder 3 y con una miniatura ya "crecidita" de 400X400, que es el máximo que permite el ancho de las entradas, y sale perfecto al doble de tamaño en firefox,pero en IE8, al pasar el ratón, se queda aún más pequeño, al tamaño de 360px que marca el CSS; he intentado cambiar en la plantilla, de 360 a 500px, pero entonces en firefox sale todavía más grande, aunque en IE8 queda ya bien y más grande, pero parte queda oculta debajo de la sidebar. Es un laberinto del que no sé salir, ni sé si se puede hacer algo. ¿Hay solución?
Tendría que ver el ejemplo concreto.
Ahora aquí el problema lo dá Chrome, ya que cuando se usan bordes o fondos de color en las imágenes, al rotarlas, se ven dentados, y pues se ven mal, ya lo había visto antes.
Ese es el problema actual de CSS3 "la accesibilidad", ¿cuando llegará el tiempo en que se puedan usar esas propiedades libremente, sin sentir la intriga de que tal vez quien te ve del otro lado del monitor no te vea igual? pero después de eso sigue el problema con la gente, muchos que navegan por Internet desconocen que en tal o cual navegador las cosas se "ven mejor" en ciertos navegadores, y desde ahí surge la raíz del problema, se tendría que hacer una campaña masiva para desterrar navegadores viejos e inútiles como IE6 que aún se sigue usando o bien para que quienes usan IE por lo menos actualicen sus navegadores, yo en lo personal lo creo casi imposible, es como pretender que en un país el 100% de su población vote por un solo candidato político en elecciones presidenciales por ejemplo.
Lo único que nos queda es que afortunadamente hay muchos mañosos, en el buen sentido de la palabra, que siempre buscaran burlar esas limitaciones por medio de jack's :)
Saludos Jmiur y que tengas un estupendo día!
Hasta cuando?
http://www.desarrolloweb.com/articulos/que-es-html5.html
La uniformidad no existe y por suerte, no existirá (eso espero) pero, no es un problema del CSS3; lo mismo ocurre con las versiones actuales del CSS e incluso con el HTML.
Algunas de esas diferencias son errores que cada tanto se van corrigiendo; otras permanecen y hay que adaptarse a ellas.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...