Soporte » Diseño – Temas y plantillas » Aumento de tamaño de fotos de galeria al hacer mouse over

  • Resuelto emi8

    (@emi8)


    Hola, que tal.

    Me gustaría saber si alguien me puede indicar como, en una galeria de fotos, al pasar el mouse x encima de alguna foto, ésta puede aumentar ligeramente el tamaño, que lo encuentro un efecto muy chulo.

    saludos,

    E.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 15 respuestas - de la 1 a la 15 (de un total de 17)
  • Moderador almendron

    (@almendron)

    Moderador almendron

    (@almendron)

    Hola Almendron,

    Buenísima respuesta! Gracias, de verdad. El primero de los plugins es impresionante! Voy a probarlo a ver que tal. Como anécdota lo estoy mirando y tiene muchísimos efectos, pero no veo el de aumentar tamaño, jajaja! Bueno miraré más detenidamente! De nuevo, gracias y cierro hilo.

    saludos

    Buenas, despues de mucho mirar, lo que me gustaría es implementar un poco de código y listo, sin tener que instalar otro plugin, que además la mayoria de ellos vienen capados xa q compres la opción de pago.

    El caso es que he encontrado el trozo de código a insertar en:

    http://wpdecoder.com/css/enlarge-image-on-hover-effect/

    Dice que para implementarlo hay que darle a la clase Div dnd esté la imagen, el parametro ‘aumentar’ o ‘enlarge’, y luego agregar el código que pone algo más abajo. A ver si alguien puede decirme como hacer esto, porque no se a que clase Div se refiere.

    saludos,

    E.

    Moderador almendron

    (@almendron)

    1) En Apariencia > Personalizar > CSS adicional y añades:

    .elarge img {
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .enlarge img:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    2) En cada página o entrada donde quieras ese efecto, tendrás que poner en la pestaña HTML:

    <div class="elarge">
    Insertas en este punto la imagen o las imágenes
    </div>

    Voy a ello, ahora te cuento. Gracias!

    Hola, pues no me ha funcionado. En el paso 1 no hay problema, he ido a lo de personalización, añadir CSS, y he puesto ese código. En el paso 2, te dejo un copy&paste de lo tengo en html:

    <p class=”news-header-opening-txt”>Si te gusta marcar la diferencia, marcar tus propias reglas de moda y elegir sobre tus propios gustos, ésta es tu pagina. Aquí encontrarás artículos alucinantes de estrellas, que te hagan soñar y definir tu propia personalidad.</p>
    
    <hr />
    
    <div class=”elarge”>
    
    [gallery legend="false" ids="2471,1926,319,1501,1945,1502,1504,1505,1506,1507,1508,2089,1509,1510,1511,2460,1513,1514,1515,1516,1203,1517,1518,2206,1520,1521,1522,1523,1525,2146,1526,1527,2040,1528"]
    
    </div>
    • Esta respuesta fue modificada hace 1 año, 8 meses por almendron.

    Ahora q lo pienso, ese código sale cuando voy a Admin > paginas, y la q tengo seleccionada como pagina de inicio, le doy a editar y despues a HTML.

    salu2

    Moderador almendron

    (@almendron)

    Hay un error en el código:

    Donde pone enlarge img:hover debería poner elarge img:hover

    De todas formas, haz primero una prueba con una sola imagen.

    Hola Almendron, que tal.
    Gracias x responder! y disculpa que haya tardado tb en dar respuesta a los comentarios, he estado un par de dias liado. Respondiendo punto a punto:

    – Sobre el código, q debería poner elarge –> No hay problema, se pone la palabra adecuada en la sección CSS Adicional, y listo.

    – Sobre lo de poner:

    <div class=»elarge»>
    Insertas en este punto la imagen o las imágenes
    </div>

    No se donde insertarlo. Me gustaría ponerlo en una Galeria de fotos que tengo en la página de inicio, y ya te digo, no se dnd insertarlo. He probado a poner dicho código en la parte de HTML de la página que tengo seleccionada como de inicio, pero no pasa nada. A ver si me puedes indicar dnd insertar dicho código para una galeria de fotos con varias fotos.

    salu2 y gracias!

    Moderador almendron

    (@almendron)

    Ve a Páginas > Todas las páginas y localiza allí la que empleas como inicio.

    Edita la página y pestaña HTML:

    ¿te aparece algo? ¿está el primer bloque que es un texto? ¿y debajo de ese bloque que sale?

    Moderador almendron

    (@almendron)

    De todas formas, haz antes una prueba: añade una nueva entrada y añades una imagen para ver si funciona.

    No es necesario que publiques la entrada. La guardas en modo borrador y luego le das a Vista Previa.

    Moderador almendron

    (@almendron)

    He hecho la prueba y funciona perfectamente.

    Te hago un copy&paste de lo que tengo en la pagina de inicio:

    <p class=”news-header-opening-txt”>Directamente desde el cielo, las estrellas bajan a la tierra para llenar tus prendas y accesorios con el mejor estilo del otoño. No te resistas al poderoso influjo de los astros. Si ha habido un print especial, con personalidad, carácter y presencia en absolutamente todas las prendas y accesorios de nuestro armario estas últimas temporadas, ha sido sin ninguna duda el de estrellas. Y seguimos adelante con ellas. Por eso, con diseños actuales, no nos resistimos a incluirlas en nuestra selección de prendas preferidas. Estas son nuestras piezas favoritas de la temporada. Para salir de fiesta, llevar a la oficina y prácticamente a cualquier sitio. Solo te avisamos: no es fácil resistirse a la tentación.</p>
    <p class=”news-header-opening-txt”>Si te gusta marcar la diferencia, marcar tus propias reglas de moda y elegir sobre tus propios gustos, ésta es tu pagina. Aquí encontrarás artículos alucinantes de estrellas, que te hagan soñar y definir tu propia personalidad.</p>
    
    <hr />
    
    [gallery legend="false" size="medium" ids="2471,1926,319,2544,1945,1502,1504,1505,1506,1507,1508,2089,1509,1510,1511,2460,1513,1514,1515,1516,1203,1517,1518,2206,1520,1521,1522,1523,1525,2146,1526,1527,2040,1528"]
    <h2 style=”text-align: justify;”>► BuenaEstrella, la tienda para gente con chispa</h2>
    <p style=”text-align: justify;”>Los adornos en forma de estrella se han vuelto una forma muy demandada en los últimos años, sin embargo la variedad sigue creciendo día con día, con anillos, collares, cuadros, camisas,  camisetas y muchísimas prendas más de vestir. Nosotros hemos seleccionado una amplia gama de artículos con motivos de estrellas para que tengas donde elegir y siempre con la seguridad y garantías que ofrece comprar online con Amazon.</p>
    
    <h2 style=”text-align: justify;”>► Por qué Amazon?</h2>
    <p style=”text-align: justify;”>Amazon ofrece una serie de servicios que lo han convertido en una de las mayores plataformas de shopping a nivel mundial: seguridad, rapidez, tranquilidad, variedad, fiabilidad, y sobre todo una gran garantía de satisfacción.</p>
    <p style=”text-align: justify;”>Las compras online han sido la bomba en este 2018 ya que se ha convertido en un sistema fácil, a unos precios muy competitivos y con sistemas de seguridad de compra que ofrecen fiabilidad, confianza y una comodidad increíble, ya que puedes comprar desde casa, en el parque, en la cafetería… virtualmente desde cualquier sitio con cobertura,  a través de tu móvil, tablet, pc o portatil.</p>

    No se dnd insertar el código ahí, me gustaría ponerlo en la galeria de fotos.

    salu2 y d nuevo Gracias Almendron, y disculpa que de tanto la brasa con esto.

    • Esta respuesta fue modificada hace 1 año, 8 meses por almendron.
    Moderador almendron

    (@almendron)

    Sustituye

    [gallery legend="false" size="medium" ids="2471,1926,319,2544,1945,1502,1504,1505,1506,1507,1508,2089,1509,1510,1511,2460,1513,1514,1515,1516,1203,1517,1518,2206,1520,1521,1522,1523,1525,2146,1526,1527,2040,1528"]

    por

    <div class=”elarge”>
    [gallery legend="false" size="medium" ids="2471,1926,319,2544,1945,1502,1504,1505,1506,1507,1508,2089,1509,1510,1511,2460,1513,1514,1515,1516,1203,1517,1518,2206,1520,1521,1522,1523,1525,2146,1526,1527,2040,1528"]
    </div>

    Avisa cuando hayas puesto el código para echarle un vistazo.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 17)
  • El debate ‘Aumento de tamaño de fotos de galeria al hacer mouse over’ está cerrado a nuevas respuestas.