Entonces, alguien me dio una buena solución para hacer que se pueda hacer clic en la superposición, pero hace que la superposición se expanda verticalmente, rompiendo el efecto de superposición en WordPress (aunque se ve bien en codepen).

Encontré otra solución que consistía en agregar pointer-events: none; que permitía hacer clic en la superposición, lo que lo lleva a otra URL. Intenté implementarlo en WordPress porque codepen funciona como debería, pero para mi consternación, no funciona en absoluto en WordPress.

¿Existe una alternativa para hacer clic en la superposición sin expandir la cuadrícula de superposición o romper la superposición y los textos en WordPress?

El objetivo es mantener el texto restante en la imagen, cuando pasa el mouse, aparece la superposición, lo que le permite hacer clic para redirigir a otra página.

CSS

.posts {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  color: white;
}

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  pointer-events: none;
}

.overlay:hover:after {
  opacity:1;
}

HTML

<div class="js-masonry">
    <?php if( have_posts() ): while( have_posts() ): the_post();?>
    <div class="item-masonry overlay">
    <a href="#">
        <div class="posts">
            <p><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ligula sollicitudin, euismod nibh in, feugiat lectus.</h2></p>
        </div>
        <img src="#"/>
      </a>
    </div>
    <?php endwhile; else: endif;?>
</div>
0
user13859048 29 jul. 2020 a las 06:43

1 respuesta

La mejor respuesta

Descubrí el problema. pointer-events: none; funciona.

Si escribe textos normales dentro del cuadro, se puede hacer clic en toda la superposición.

Si quiero llamar al <?php the_excerpt();?>, el hipervínculo completo se llama al extracto por alguna razón. Eliminar esto permitirá que toda la miniatura y la superposición tengan un hipervínculo correctamente.

Llamar a <?php the_title();?> y <?php the_date('m-d-y', '<h2>', '</h2>');?> funciona bien.

0
user13859048user13859048 29 jul. 2020 a las 08:28