Pter2008 Posted March 20, 2013 Share Posted March 20, 2013 (edited) Hola, buenas noches! Este es mi cuarto topic que escribo y ante todo, quería agradecerles a todos los que participan y aportáis vuestra ayuda para resolver mis dudas como principante en prestashop. ¡Estoy muy muy orgulloso! Ahora va mi cuarta proposición: Quiero colocar unos efectos tipo "sombra" como los de la barra de categorías principal en lo que son los iconos de arriba a la derecha y sobre todo en las 3 imágenes de la última categoría "Tiendecita", ya que lo veo como muy estático. ¿Tengo entendido que es creando una nueva imagen y anteponerla a la actual?, ¿Cómo se realiza? Muchas gracias!! Edited May 7, 2013 by Pter2008 (see edit history) Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 jajajaja, uf no había actualizado la página y no había visto...que barbaridad... . Voy a probar y te cuento! Muchas gracias amigo! Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 He copiado un código de internet finalmente (efecto que amplía la imagen), pero mi gran duda es, ¿Cómo lo coloco y de qué forma? he intentado buscar cómo se hace y qué códigos hay que poner pero no entiendo ni papa... El código es este: /*Example 2*/ #container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } Y querría poner ese efecto en cada una de las 3 imágenes de esta sección (tiendecita): http://arborisadornosflorales.com/cms.php?id_cms=8 Link to comment Share on other sites More sharing options...
jaloise Posted March 21, 2013 Share Posted March 21, 2013 He copiado un código de internet finalmente (efecto que amplía la imagen), pero mi gran duda es, ¿Cómo lo coloco y de qué forma? he intentado buscar cómo se hace y qué códigos hay que poner pero no entiendo ni papa... El código es este: /*Example 2*/ #container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } Y querría poner ese efecto en cada una de las 3 imágenes de esta sección (tiendecita): http://arborisadorno...ms.php?id_cms=8 Me tome el atrevimiento de crearte unos efectos en css3, lo que tiene es que no anda muy bien en explorer ya que css3 no se lleva bien con explorer pero probalo si queres... en themes/tutema/css/global.css al final de todo pone esto: #redes img{ transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } #redes img:hover{ transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -webkit-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -ms-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); } y subilo y despues pasa con el mouse por arriba de las imagenes de la barra de arriba de la derecha, las de las redes sociales saludso! Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 Woow, genia! Me encanta amigo!. ¿Cómo podría poner también ese efecto en las 3 imágenes de las categorias de la sección "Tiendecita"? De nuevo, muchas gracias! Un saludo! Link to comment Share on other sites More sharing options...
jaloise Posted March 21, 2013 Share Posted March 21, 2013 Woow, genia! Me encanta amigo!. ¿Cómo podría poner también ese efecto en las 3 imágenes de las categorias de la sección "Tiendecita"? De nuevo, muchas gracias! Un saludo! Asi a las apuradas, creo que esto deberia funcionar: .rte a img{ transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .rte a img:hover{ transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -webkit-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); -ms-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px); } Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 Voy a probar, la cosa es que las imágenes que quiero animar estan en un cms...te digo en seguida amigo. Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 Perfecto! Que sencillo...pero observo que al ampliarse los cuadritos se deforman para un lado, ¿Cómo corrijo eso? Link to comment Share on other sites More sharing options...
jaloise Posted March 21, 2013 Share Posted March 21, 2013 Perfecto! Que sencillo...pero observo que al ampliarse los cuadritos se deforman para un lado, ¿Cómo corrijo eso? Fijat asi: ..rte a img{ transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .rte a img:hover{ transform: rotate(0deg) scale(1.133) skew(0deg) translate(0px); -webkit-transform: rotate(0deg) scale(1.133) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1.133) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1.133) skew(0deg) translate(0px); -ms-transform: rotate(0deg) scale(1.133) skew(0deg) translate(0px); } Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 Perfecto, me gusta más ese efecto que ha quedado. Muchas gracias por sus ayudas. Doy el topic como finalizado! Link to comment Share on other sites More sharing options...
jaloise Posted March 21, 2013 Share Posted March 21, 2013 Perfecto, me gusta más ese efecto que ha quedado. Muchas gracias por sus ayudas. Doy el topic como finalizado! Un placer ayudarte, antes de finalizado pon SOLUCIONADO Un Saludo! Link to comment Share on other sites More sharing options...
Pter2008 Posted March 21, 2013 Author Share Posted March 21, 2013 Eso, solucionado! hecho! Tengo otro topic que está sin finalizar, para si quieres hecharme otro cable... http://www.prestashop.com/forums/topic/232735-aumentar-tiempo-de-transicion-de-slideshow-en-web/page__p__1144934 Gracias, y un saludo! Link to comment Share on other sites More sharing options...
Recommended Posts