JMiur [E]

Hay muchas ideas y demos dando vuelta por la web que muestran lo que puede hacerse con las transiciones; por lo general, la mayoría de ellos siempre hablan de Chrome pero basta agregar los prefijos adecuados para que tambien funcionen en Opera y Firefox 4. Estos son algunos ejemplos que nos permiten generar efectos con imágenes. Pero hay muchos más.

En todos ellos, el HTML es similar y tiene este esquema:
<div class="demoIMG">
  <img class="novisible" src="URL_UNA_IMAGEN" />
  <img class="visible" src="URL_OTRA_IMAGEN" />
</div>
En un DIV normal, colocamos dos imágenes a las que le agregamos clases y definimos sus reglas generales:
<style>
  .demoIMG { /* el rectángulo contenedor */
    position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */
    height:330px; /* le damos una cierta altura */
    margin:0 auto; /* lo centramos */
    width:500px; /* le damos un cierto ancho */
  }
  .demoIMG img { /* el contenido */
    left: 0; /* posición izquierda */
    position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */
    top: 0; /* posición superior */
  }
  /* y ponemos propiedades en las clases de cada imagen */
  /* la primera no será visible por defecto */
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  /* y se verá cuando pongamos el cursor encima del DIV */
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
  /* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  
</style>
Si sólo pusiéramos eso, veríamos una imagen, la que tiene la clase visible; la otra estaría debajo ya que ambas ocupan la misma posición.

Poniendo el cursor encima, cambian:


Agregando las propiedades de transición, haremos lo mismo pero animando ese cambio de opacidad así que sólo agregamos la propiedad a todas las imágenes:
#demoIMG img {
  .......
  /* esto, hará que cualquier cambio en las imágenes, se muestren con una animación */
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Y jugamos un poco, agregando transformaciones en una o en ambas imágenes.

En este otro ejemplo, al cambio de la opacidad anterior, le sumamos una tranformación de escala así que cuando permuten, lo harán "aumentando" de tamaño:
#demoIMG img.novisible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}
#demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
#demoIMG:hover img.visible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

En este último ejemplo, se hace lo mismo, variando la escala y ocultando la primera con un efecto de rotación:
#demoIMG img.novisible {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
 #demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
 #demoIMG:hover img.visible {
  -moz-transform:rotate(360deg) scale(0);
  -webkit-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
}

41 comentarios:

Roster  

Creo que sin duda, CSS se ha transformado en una herramienta muy poderosa, ya que se pueden crear cosas increíbles. Y está aplicado en el ejemplo que estás haciendo ahora, además de ser muy fácil para utilizar, editar y aplicarlo en el blog.

Gracias por el aporte y creo que lo utilizaré dentro de muy poco. Saludos!

Responder
Memiliano  

Wow!! Que bueno que sigas con este tema, me encanta!!

No puedo creer que con un par de lineas sencillas se pueda hacer tanto...
Es decir, se hace todo con CSS, impresionante...

Muy bueno, saludos!!

Responder
Gem@  

Como resultado cargará más rápida la página ¡¡bien por el CSS !!

Responder
Graciela  

Algo raro me sucede, no veo cambios en cada ejemplo, con Firefox se aprecian?

Responder
oloman  

Lo mismo que en el anterior... me gusta :)

Responder
Andres Amat  

por favor poodrias responder mi pregunta que deje en otro post :(
http://vagabundia.blogspot.com/2007/05/insertar-un-swf-en-blogger.html?commentPage=2

sigo sin saber como arreglarlo :((

Responder
NickJP!^xD  

hmmm esto no me funciona T_T

Responder
JMiur  

Sin saber cual es tu ejemplo. Imposible decir nada.

Responder
Gelimo  

Muy bueno!!! gracias me sirvió y gustó mucho ... pero tengo un problema .. utilicé el mismo principio pero en lugar de un div utilicé un li para crear un menu y no funciono.

Responder
JMiur  

Tendría que ver tu ejemplo para saber dónde está el error.

Responder
Manfenix  

Excelente aporte JMiur.
Transición funcionando a pleno:
Avibert
Saludos, :)

JMiur  

Perfecto, Manfenix :D

Responder
aitor burgui  

como aplico este codigo a unas imagenes de sustitucion hechas con dreaweaver detro de una tabla? un saludo

JMiur  

No sé que significa "unas imágenes de sustitución hechas con dreamweaver"

Se aplica a las imágenes usando ids o clases y armando el código tal como muestra la entrada y agregando las reglas de estilo.

Responder
miguel  

Mmmm, aun no se bueno usarlo, a pesar que mucha gente ya esta usando navegadores que soportan estos codigos hay aun mucha mas gente que sigue usando el internet explorer, y aunque usen en IE9 no se puede apreciar nada.

JMiur  

Cada uno puede usar o no usar lo que quiera. Lo que no es cierto es que haya MUCHA más gente que usa IE comparada con el resto de los navegadores. Cualquier estadística de uso te dirá exactamente lo contrario.

Responder
Lisandro Pr  

Hola Jmiur, espero estés muy bien, sabes siempre leo tus post y es la 1ra vez que te escribo me agrada mucho las cosas que publicas son para sacarle bastante provecho :)... Bueno mi pregunta es en el 2do ejemplo que muestras acá seria posible hacer que cambien las imágenes automáticamente? si es posible te lo agradecería un mundo, otra cosa yo quisiera hacer una galeria de fotos dentro de una web donde una persona mediante un usuario y contraseña pueda crear albunes, subir y modificar fotos, sin usar un programa alterno quisiera crearlo desde cero? si tienes algun link o sabes de algo al respecto también te lo agradecería.
muchas gracias

JMiur  

Para que no hubiera intervensiòn del usuario, debería ser una animación. Eso puede hacerse con CSS pero es algo engorroso. Puedes ver un ejemplo en esta entrada. Caso contrario, debe usarse un script de alguna clase.

Para hacer ese tipo de sitio al que te refieres se requieren muchas cosas. Un hosting propio, una base de datos, PHP, MUCHA PERO MUCHA SEGURIDAD porque es una de las situaciones más complejas de manejar ya que las imágenes pueden no ser imágenes y si las subes a un hosting debe tenerse muchísimo cuidado. No puedo darte un dato exacto sobre todo eso porque no es algo simple sino un sistema completo.

Responder
Christian Dan Bejarano  

Hola! muchas gracias por el aporte.

Un pregunta, ¿sería muy complicado que se produjera la transición entre imágenes sin necesidad de poner el ratón encima? Tipo Slideshow.

Muchas gracias
Christian.

JMiur  

Para eso, creo que deberías usar animaciones con CSS o crear algún tipo de script.

Responder
montanero123  

gracias por tu aporte; quiero preguntarte, si es posible ejecutar trancisiones entre otros elementos (iframes por ejemplo) y si es posible, podrias ayudarnos con tu explicacion?
gracias de nuevo

JMiur  

Sí. Sería lo mismo con casi cualquier etiqueta aunque las propeidades a cambiar, dependerán. Por ejemplo, una transicion con opacidad:

<style>
.demo{
height: 400px;width: 400px; /* el ancho y alto de las iframes */
margin: 0 auto;
position: relative;
}
.demo iframe {
height: 400px;width: 400px; /* el ancho y alto de las iframes */
position: absolute;left: 0;top:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.demo iframe.novisible {opacity: 0;}
.demo:hover iframe.novisible {opacity: 1;}
.demo:hover iframe.visible {opacity: 0;}
.demo iframe.visible:hover {opacity: 0;}
</style>

<div class="demo">
<iframe class="novisible" src="URL_pagina_1" marginwidth="0" marginheight="0" allowtransparency="true" align="middle" frameborder="0" scrolling="no"></iframe>
<iframe class="visible" src="URL_pagina_2" marginwidth="0" marginheight="0" allowtransparency="true" align="middle" frameborder="0" scrolling="no"></iframe>
</div>

Responder
Miguel Angel Vega Ruiz  

Saludos! Quería darle las gracias por su aporte, esto permite a la comunidad de programadores obtener nuevas ideas para el desarrollo dinámico de paginas web, pero también quería preguntarle, ¿De casualidad no hay alguna forma de generar una galería sin necesidad un evento sobre la imagen?, es decir una transición sin eventos solo automática.

JMiur  

Si te refieres a que las transiciones se ejecute sin necesidad de hacer click o algo similar, se debe usar JavaScript o bien las animaciones con CSS.

Responder
Manuel Morales  

Hola, e introducido tu ejemplo del post en una web, en Chrome se ve perfecto pero en Explorer 9 se descuadra todo. Hay alguna manera de arreglarlo???,
Gracias y un saludo.

JMiur  

No tengo IE9 así que no sé decirte.

Responder
Miguel Gonzalez  

Primero que nada te felicito muy buenos aporte, excelente diria yo estoy comenzando a estudiar esta area y aprender, Estoy usando Dreamweaver modo Html y Navegador Firefox. Disculpa mi falta de habilidad pero tengo problemas con el efecto de escalado u aumento de tamaño; de seguro el error es mio en la parte de propiedades podrias ayudarme en eso pues he copiado y modificado pero solo acepta el primer modo y el escalado no...???


JMiur  

Si usas Firefox, no hace falta agregar prefijos ya que en las últimas versiones se conprempla el uso de la propiedad normal:

para -moz-transform:xxxxxxx; debe usarse transform:xxxxx;
para -moz-transition:xxxxxxx; debe usarse transition:xxxxx;

Pero, para poder responder algo, tendría que saber qué estas haciendo con exactitud o ver un ejemplo.

Responder
Miguel Gonzalez  

Gracias por responder JMiur deseara tener tus conocimientos; para ello seguire estudiando, lo que deseo es comprender y en el futuro solucionar problemas. Codigo de propiedades que no me da efecto de escalado es el siguiente:

:#demoIMG img {

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}

#demoIMG img.novisible {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}

.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}

#demoIMG:hover img.novisible {
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}

#demoIMG:hover img.visible {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}

Responder
Miguel Gonzalez  

Para ser mas exacto como me preguntas, por ahora me ha dado solo el primer efecto de transición y no el de escalado; lo que deseo es darle la transicion de aumento y vinculacion a otra pagina eso si lo he logrado con la etiqueta de html de vinculacion; pero el escalado no, se que de seguro el error es mio por no saber agreagarle las propiedades al codigo, anterirmente te lo envie. Agradezco tu ayuda.

JMiur  

¿Y cuál es la estructura del HTML? Pregunto porque allí hay reglas confusas.

Primero, :#demoIMG img {} hay dos puntos delante del #

Segundo, agrega la propiedad genérica transform:xxxx; al final de cada regla

Por último, hay reglas que hablan de ids y otras de clases. Imagino que te refieres a las primeras. Básicamente, serían:

#demoIMG img {transition: all 1s ease-in-out;}
#demoIMG img.novisible {transform:scale(0);}
#demoIMG:hover img.novisible {transform:scale(1);}
#demoIMG:hover img.visible {transform:scale(0);

y la estructura html:

<div id="demoIMG">
<img class="novisible" src="imagen1" />
<mg class="visible" src="imagen2" />
</div>

Responder
Miguel Gonzalez  

Buenas Noches JMiur, Disculpa aun tengo problemas con el escalado y no comprendo como deben ir las propiedades, las he colocado asi:

demoIMG {
height:330px;
margin:0 auto;
width:500px;
}
.demoIMG img {
left: 0;
position:absolute;
top: 0;
}

.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}

.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}

.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}

#demoIMG img {transition: all 1s ease-in-out;}
#demoIMG img.novisible {transform:scale(0);}
#demoIMG:hover img.novisible {transform:scale(1);}
#demoIMG:hover img.visible {transform:scale(0);

pero solo sirve el cambio de imagen sin escalda, y agregando las propiedades de #demoIMG en .demoIMG no me funciona ¿que estoy haciendo mal.....?

JMiur  

Como te dije, sin saber cuál es el HTML que usas, es imposible responder ya que en las reglas de estilo, hay dos ejemplos, una con clases y otra con ids.

Responder
Miguel Gonzalez  

el html que uso es html 4

JMiur  

Me refiero al código de la página. Debeo verla completa,

Responder
Jose Miguel Morente Padial  

Si ya jQuery se consigue resultados atractivos con poco esfuerzo, ya con CSS ni te cuento! Felicidades por el artículo

Responder
EASAGIT GP  

excelente me gusto pero se podran hacer las transiciones automaticas?? y como para mayor cantidad de imagenes??

JMiur  

¿Qué significa automático? ¿Que sea un slideshow? Para eso debes usar Javascript.

Responder
zxciceron  

excelente efecto, por ejemplo si yo quiero poner cuatro imagenes en una pagina con estos efectos se prodria danndo a cada imagen un numero distinto por ejemplo demoIMG1 y asi hasta cuatro.
Por ultimo podemos agregar un link a la imagen para que ns lleve al sitio deseado. Un saludo Gracias

Responder
sandy hernandez  

excelente .. :) bien explicadito, graciias me ayudo muchoo...!!!!

Responder
benjo callisaya  

gracias!!! funciona super bien gracias =)

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