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;
