Hover Affect disabling link in Gallery

• 

  pickil11 · Member · Jan 17, 2022 at 2:11 am

  • Copy link
  • Add topic to favorites

  Hello, I have several galleries on my home page. I created a hover effect with CSS, it works beautifully however now the image links don’t work.

  If I disable the hover effect I can click on the image and it takes me to the page it’s suppose to.

  When I re-enable the hover effect, the links stop working.
  I can add the link to the caption as well but that only works on the words not the entire image.

  I can make the hover NOT cover the whole image with a gradient effect for the background of the caption, which is fine for some of the images but not all and it only Band-Aids the problem, visitors can only click on the image part and not the part the text area.

  I want to have a full cover effect on the hover that shows the caption, which I have, but I want the image link to still work.

  Here’s the code I have for the hover effect.

  figure.BookCover {
  padding: 0;
  cursor: pointer !important;
  }

  figure.BookCover > figcaption {
  display: none;
  background: linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent) !important;
  height: 100%;
  padding-top: 3em !important;
  padding-left: .8em !important;
  padding-right: .8em !important;
  font-size: 1em !important;
  line-height: 1.3em !important;
  max-height: 100% !important;
  font-family: “Quicksand”;
  font-weight: ;
  color: #f1f3ee !important;
  }

  figure.BookCover:hover > figcaption {
  display: block;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  1dr0 · Staff · Jan 17, 2022 at 3:27 am

  • Copy link

  Hi there,

  Thank you for being proactive to contact us in the forum! It looks like we have managed to solve it on Chat a few minutes ago.

  Reposting a summary on how we resolved this, in the event anyone else is looking to do the same.

  * Image and captions are two separate elements (each having its own link wrap options).
  * Turned off Jetpack lightbox (Settings > Media — “Enable carousel”).
  * Updated CSS code to use flex and visibility (making each take the full height and centered align within the parent element).

  Marking this topic as resolved. :)