Image href's in Image Gallery Problem

hey people,

I hope somebody can help me out. I want to make my Images in the image gallery clickable links and I managed to make that happen by wrapping my overlay effects inside a “href” . But then a problem seems to appear. My Image gallery then automatically places a blank space next to the image i included the href in. So my Image grid div container somehow treats my href as a img? So it works on the overlay effect as wished, but also gets placed as an additional item in the image grid. How do i solve this mess?
thanks in advance

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by justin.franklin.stokes</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>

 
  <!-- partial:index.partial.html -->

  <div class="imagegrid">


    <img class="imagegrid-col-2 imagegrid-row-2" src="http://zentrumraum.de/wp-content/uploads/2021/07/zentrumraum_kino2-768x428.png" alt="Kinovorführung">
    <div class="image__overlaykino"> 
      <div class="image__title">Kinovorführung </div>
        <p class="image__subtitle">  Lichtenberg 2018 </p>
      </div>
   
    
     
   
   
    <img class="imagegrid-col-2" src="https://i.ibb.co/jghdK6p/Bildschirmfoto-2022-11-23-um-21-18-29.png" alt="Kingsize">
    <div class="image__overlaykingsize imagegrid-col-2 imagegrid-row-2"> 
      <div class="image__title">Kingsize Vollversammlung </div>
        <p class="image__subtitle">  Tag der Clubkultur 2022 </p>
      </div>
   
    

    <img class="imagegrid-row-2 imagegrid-col-2" src="https://i.ibb.co/sQFgz9j/photo-2022-11-23-21-30-07.jpg" alt="Wagen">
    <div class="image__overlaywagen imagegrid-col-2 imagegrid-row-2"> 
      <div class="image__title">Kingsize Vollversammlung </div>
        <p class="image__subtitle">  Tag der Clubkultur 2022 </p>
      </div>


    <img class="imagegrid-row-2" src="https://i.ibb.co/wJBxMpw/2022-11-25-12-19-32.jpg" alt="Kinovorführung">
    <div class="image__overlaywagen"> 
      <div class="image__title">Kingsize Vollversammlung </div>
        <p class="image__subtitle">  Tag der Clubkultur 2022 </p>
      </div>
     
    
      <img src="http://zentrumraum.de/wp-content/uploads/2021/07/karte-versorgung-korrigiert-1280x835.png" alt="Kinovorführung">
      <a href="https://www.facebook.de"> 
    <div class="image__overlaywagen"> 
      <div class="link">
      </div>
      <div class="image__title">Wagen </div>
        <p class="image__subtitle">  Tag der Clubkultur 202 </p>
      </div>
      </a>
  
      
    
      
   
       </div>

       </body>

</html>

CSS

.imagegrid { 

  --num-cols: 4;
  --row-height: 200px;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
 

}  

.imagegrid-col-2 {
grid-column: span 2;

}

.imagegrid-row-2 {
  grid-row: span 2;
}

.imagegrid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text Display on Image Overlay */

.image__title {
  font-size: 1.25em;
  font-weight: bold;
}

.image__subtitle {
  font-size: 1.25em;
  margin-top: 0,25em;
}


/* Overlay effect for Kino - places Text on Image */
.image__overlaykino {
  position: absolute;
  top: 0;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  background: rgba(0,0,0,0.6);
  left: 0;
  width: 50%;
  height: 55%;
  display: flex; /* vertically&horizontally center text */
  flex-direction: column;  /* places on top of each other*/
  align-items: center;
  justify-content: center;
  opacity:0

}


.image__overlaykino:hover {
  opacity:1;
  
}

.image__overlaykingsize {
  position: absolute;
  top: 0;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  background: rgba(0,0,0,0.6);
  left: 600px;
  width: 53%;
  height: 29%;
  display: flex; /* vertically&horizontally center text */
  flex-direction: column;  /* places on top of each other*/
  align-items: center;
  justify-content: center;
  opacity:0

}


.image__overlaykingsize:hover {
  opacity:1;
  
}

.image__overlaywagen {
  position: absolute;
  top: 200px;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  background: rgba(0,0,0,0.6);
  left: 640px;
  width: 50%;
  height: 58%;
  display: flex; /* vertically&horizontally center text */
  flex-direction: column;  /* places on top of each other*/
  align-items: center;
  justify-content: center;
  opacity:0

}


.image__overlaywagen:hover {
  opacity:1;

Hi,

I couldn’t really get a working example up and running so this is just a guess but what happens if you make the anchor the ‘image__overlaywagen’ wrapper itself.

e.g.

  <img src="https://i.ibb.co/jghdK6p/Bildschirmfoto-2022-11-23-um-21-18-29.png" alt="Kinovorführung">
  <a class="image__overlaywagen" href="https://www.facebook.de">
    <div class="image__title">Wagen </div>
    <p class="image__subtitle"> Tag der Clubkultur 202 </p>
  </a>

If that doesn’t help then try posting a codepen or similar that we can work with :slight_smile:

Thanks man it worked! really helped me out here and learned a new trick! :slight_smile:

1 Like