Make <div> element clickable on hover

Question

I'm working on a website (my first) that uses WordPress, but I'm tweaking some little things through HTML and CSS code.

I have a bunch of pictures in a grid, that I want to be clickable. All pictures have an overlay that appears when hovering over them with the cursor, and a (permanent) clickable title on top of that.

I would like the image or the overlay to be clickable in its entirety. However, I cannot get it to function properly. I tried to put an <a href> and </a> around the overlay, but this makes the overlay disappear altogether. If I try the same basic structure (`) in a different spot, it does seem to work, so maybe it has to do with elements 'higher up'.

I'm very new to this, so I might overlook something very basic. I added a piece of HTML and CSS, but since it's part of the WP structure, I'm unable to add all the relevant CSS.

#featured-categories #categories-container .category-wrapper {
  height: 300px;
  display: flex;
}

@media screen and (max-width: 991px) {
  #featured-categories #categories-container .category-wrapper {
    height: 200px;
  }
}

#featured-categories #categories-container .category-wrapper .category-title {
  width: 50%;
  display: inline-block;
  background: #ff5722;
}

#featured-categories #categories-container .category-wrapper .category-title span {
  color: white;
  font-size: 36px;
  display: inline-block;
  float: right;
  margin: 10% 5%;
}

@media screen and (max-width: 768px) {
  #featured-categories #categories-container .category-wrapper .category-title span {
    font-size: 22px;
  }
}

#featured-categories #categories-container .category-wrapper .category-thumbs {
  width: 50%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .grid-item img {
  width: 100%;
  max-width: none;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-1 img {
  width: auto;
  height: auto;
}

.overlay {
  width: 100%;
  height: 100%;
  margin: auto;
  background: rgba(28, 224, 43, 0);
  position: absolute;
}

.category-thumb-1:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.category-thumb-2:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.category-thumb-3:hover .overlay {
  background: rgba(28, 224, 43, 0.6);
}

.post-title-1 {
  color: white;
  position: absolute;
  left: 20%;
  font-size: 28px;
  margin: auto;
  padding-top: 50%;
}

.post-title {
  color: white;
  position: absolute;
  font-size: 24px;
  margin: auto;
  padding-top: 25%;
}

#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2 img,
#featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 img {
  align-self: center;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 600px) {
  #featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-2,
  #featured-categories #categories-container .category-wrapper .category-thumbs .category-thumb-3 {
    display: block;
  }
}

#featured-categories #categories-container .category-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

#featured-categories #categories-container .category-wrapper:nth-child(even) .category-title span {
  float: left;
}

<div class="category-wrapper category-<?php echo esc_attr( str_replace( ' ', '-', strtolower( esc_html( get_cat_name($cat) ) ) ) ); ?>">
  <div class="category-title">
    <a href="<?php echo esc_url( get_category_link( $cat ) ) ?>" title="<?php echo esc_attr( get_cat_name($cat) ); ?>"><span><?php echo esc_html( get_cat_name($cat) ); ?></span></a>
  </div>
  <div class="category-thumbs">
    <div class="category-thumb-1 grid-item">
      <?php if ( isset($thumb[0]) && ($thumb[0] != '') ) :
												echo wp_get_attachment_image( $thumb[0], 'large');
											else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay" onclick="window.open('https://localhost/greentravel')" style="cursor: pointer;">
      </div>
      <div class="post-title-1">
        <a href="<?php echo $link[0]?>" <span>
          <?php echo $title[0]?>
          </span>
        </a>
      </div>
    </div>
    <div class="category-thumb-2 grid-item">
      <?php if ( isset($thumb[1]) && ($thumb[1] != '') ) :
											echo wp_get_attachment_image( $thumb[1], 'large');
										else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay">
      </div>
      <div class="post-title">
        <a href="<?php echo $link[1]?>" <span>
          <?php echo $title[1]?>
          </span>
        </a>
      </div>
    </div>
    <div class="category-thumb-3 grid-item">
      <?php if ( isset($thumb[2]) && ($thumb[2] != '') ) :
											echo wp_get_attachment_image( $thumb[2], 'large');
										else : ?>
      <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/placeholder.png' ); ?>">
      <?php endif; ?>
      <div class="overlay">
      </div>
      <div class="post-title">
        <a href="<?php echo $link[2]?>" <span>
          <?php echo $title[2]?>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

why don't you try putting the <a> tag inside the <div> tag(overlay) and make <a> a 'display: block' element. Just try...

Answer 2

For anybody else looking for answers: At the top of this post, when you hover the OP's gravatar (@amn; the unicorn img), it does what we're looking for. :-D It expands, stays open, and the avatar is clickable.

I'm trying to figure out how they're doing this, and I think the magic is in giving it:

• an absolute position
• left, right, top, AND bottom
• high z-index, and
• overflow: hidden