Imagen Superponer y Recortar

  • marda23

    (@marda23)


    hace 1 año, 2 meses

    Qué tal.

    Quisiera saber cómo puedo hacer para que una imagen al pasar el cursor se recorte a la mitad y a su vez aparezca un breve texto.

    Un ejemplo claro es el de BigSEO debajo de la sección «Las empresas nos contratan por nuestros resultados» https://bigseo.com/agencia-seo/

    Yo uso Gutenberg, Astra gratis y Spectra (plugin de Astra)

    Gracias por la ayuda.

Viendo 1 respuesta (de un total de 1)
  • Alvaro Torres

    (@algato333)

    hace 1 año, 2 meses

    Hola @marda23,

    Ese efecto hover tendrías que hacerlo mediante CSS. Podrías por ejemplo crear unas columnas en Gutenberg añadir arriba de cada columna la imagen y debajo un párrafo con el texto.

    Mediante CSS podrías poner la columna como overflow:hidden;position:relative y el párrafo como position:absolute;bottom:-500px;left:0;right:0;transition:0.3; y cuando hagas hover en la columna que afecte a ese párrafo y cambie a bottom:0

    Espero haberte ayudado, Gracias

Viendo 1 respuesta (de un total de 1)
  • El debate ‘Imagen Superponer y Recortar’ está cerrado a nuevas respuestas.

Etiquetas