Created
October 10, 2025 02:15
-
-
Save prof3ssorSt3v3/68443053342edcf1306f29c62f11f277 to your computer and use it in GitHub Desktop.
Example with combining position absolute and relative, plus using object-fit for images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Gallery</title> | |
| <style> | |
| :root { | |
| --bg: hsl(300, 50%, 40%); | |
| --fg: hsl(300, 10%, 90%); | |
| --space-xs: 0.5rem; | |
| --space-sm: 1rem; | |
| --space-md: 2rem; | |
| --space-lg: 4rem; | |
| } | |
| html, | |
| body { | |
| font-size: 1rem; | |
| font-family: sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| header, | |
| main { | |
| padding: 1rem 2rem; | |
| } | |
| .cards { | |
| list-style-type: none; | |
| display: grid; | |
| grid-template-columns: repeat(3, clamp(250px, 25vi, 400px)); | |
| gap: 1rem; | |
| } | |
| .card { | |
| border: 1px solid #333; | |
| border-bottom-right-radius: 1rem; | |
| border-bottom-left-radius: 1rem; | |
| background-color: hsla(330, 50%, 30%, 0.64); | |
| } | |
| .card__image { | |
| position: relative; | |
| overflow: hidden; | |
| height: clamp(140px, 25vh, 220px); | |
| margin-block-start: 0; | |
| img { | |
| object-fit: cover; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| span { | |
| display: none; | |
| position: absolute; | |
| inset: 0 0 auto 0; | |
| background-color: hsla(330, 50%, 30%, 0.64); | |
| color: white; | |
| padding: 0.25rem 1rem; | |
| } | |
| &:hover span { | |
| display: block; | |
| } | |
| } | |
| .card__text { | |
| padding: 0.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Image Gallery</h1> | |
| <h2>Combining position absolute and relative</h2> | |
| </header> | |
| <main> | |
| <p>Each of the images in these cards is a different size but they are being presented as the same width and height in the cards.</p> | |
| <p>Hovering over any image will reveal the title of the image on top of the image using a combination of position absolute and relative.</p> | |
| <p>The list of cards is built with list items and display grid.</p> | |
| <ul class="cards"> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/300/200" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/300/300" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/300/240" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/280/200" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/250/270" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/310/260" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/310/320" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/320/270" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/370/300" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/300/220" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/350/200" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/330/230" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| <li class="card"> | |
| <p class="card__image"><img src="https://picsum.photos/id/165/300/260" alt="sample image" /><span class="title">Sample Image Title</span></p> | |
| <p class="card__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, maiores.</p> | |
| </li> | |
| </ul> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment