koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Instagram Herze und Kommentare overlay auf den Fotos.

Browse Source
This commit is contained in:
Estelle Köhler 2026-04-23 07:55:30 +02:00
parent 485254d3e7
commit 4fbabab800
2 changed files with 145 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/index.css
View File

@ -233,6 +233,52 @@
object-fit: cover; object-fit: cover;
} }
/* =========================================
NEW INSTAGRAM HOVER STYLES START HERE
========================================= */
.ig-post-wrapper {
position: relative;
width: 100%;
height: 100%; /* Ensures it fills the existing gallery__item */
aspect-ratio: 1 / 1;
overflow: hidden;
cursor: pointer;
}
.ig-post-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ig-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 1.1rem;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.ig-post-wrapper:hover .ig-overlay {
opacity: 1;
}
.ig-overlay span {
display: flex;
align-items: center;
gap: 8px;
}
.gallery__arrow { .gallery__arrow {
position: absolute; position: absolute;
display: grid; display: grid;

87
index.html
View File

@ -82,7 +82,7 @@
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content --> <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell"> <section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
<h2>Einblick in Cooking-Erlebnisse</h2> <div class="gallery__header"> </div><h2>Einblick in Cooking-Erlebnisse</h2>
<p>#gemeinsam_invité auf Instagram</p> <p>#gemeinsam_invité auf Instagram</p>
</div> </div>
<div class="gallery__carousel"> <div class="gallery__carousel">
@ -91,42 +91,127 @@
</button> </button>
<div class="gallery__track" aria-live="polite"> <div class="gallery__track" aria-live="polite">
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 1 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating"> <img src="assets/index_Red checkered social eating.jpg" alt="Red checkered social eating">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 142</span>
<span><i class="fa-solid fa-comment"></i> 18</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 2 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks"> <img src="assets/index_Pasta and many forks.jpg" alt="Pasta and many forks">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 89</span>
<span><i class="fa-solid fa-comment"></i> 5</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 3 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating"> <img src="assets/index_Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 215</span>
<span><i class="fa-solid fa-comment"></i> 32</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 4 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Burger eating together.jpg" alt="Burger eating together"> <img src="assets/index_Burger eating together.jpg" alt="Burger eating together">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 304</span>
<span><i class="fa-solid fa-comment"></i> 41</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 5 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs"> <img src="assets/index_Cake cutting figs.jpg" alt="Cake cutting figs">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 178</span>
<span><i class="fa-solid fa-comment"></i> 12</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 6 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home"> <img src="assets/index_Cooking woman at home.jpg" alt="Cooking woman at home">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 95</span>
<span><i class="fa-solid fa-comment"></i> 8</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 7 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls"> <img src="assets/index_Eating and laughing girls.jpg" alt="Eating and laughing girls">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 420</span>
<span><i class="fa-solid fa-comment"></i> 55</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 8 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese"> <img src="assets/index_Pasta in cheese.jpg" alt="Pasta in cheese">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 267</span>
<span><i class="fa-solid fa-comment"></i> 29</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 9 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Salad roommates.jpg" alt="Salad roommates"> <img src="assets/index_Salad roommates.jpg" alt="Salad roommates">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 112</span>
<span><i class="fa-solid fa-comment"></i> 4</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 10 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Sharing food table.jpg" alt="Sharing food table"> <img src="assets/index_Sharing food table.jpg" alt="Sharing food table">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 389</span>
<span><i class="fa-solid fa-comment"></i> 47</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 11 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_Spicy food zoomed.jpg" alt="Spicy food zoomed"> <img src="assets/index_Spicy food zoomed.jpg" alt="Spicy food zoomed">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 156</span>
<span><i class="fa-solid fa-comment"></i> 11</span>
</div>
</div>
</article> </article>
<article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 12 von 12"> <article class="gallery__item" role="group" aria-roledescription="Folie" aria-label="Bild 12 von 12">
<div class="ig-post-wrapper">
<img src="assets/index_cooking.jpg" alt="Cooking"> <img src="assets/index_cooking.jpg" alt="Cooking">
<div class="ig-overlay">
<span><i class="fa-solid fa-heart"></i> 234</span>
<span><i class="fa-solid fa-comment"></i> 21</span>
</div>
</div>
</article> </article>
</div> </div>
<button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild"> <button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">