Ich habe heute mal wieder eine echt coole CSS Anleitung mitgebracht. Und zwar kennt ihr alle diese nervigen Galerien die sehr kompliziert zu programmieren sind und sehr langsam sind. In der heutigen Anleitung zeige ich euch einen Weg wie man mit CSS und nur 3 Zeilen CSS Code eine sehr schöne Galerie erstellen kann. Ab sofort müsst ihr keine grossen Galerie Plugins für WordPress mehr einsetzen, sondern könnt euch euer Design selbst einprogrammieren.
Video / Anleitung
HTML
1
2
3
4
5
6
7
8
9
10
11
| <main>
<div class="card">
<div class="info">
<strong>Mein Titel</strong>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna</p>
</div>
<img src="https://source.unsplash.com/random/800x600/?switzerland">
</div>
...
</main> |
<main>
<div class="card">
<div class="info">
<strong>Mein Titel</strong>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna</p>
</div>
<img src="https://source.unsplash.com/random/800x600/?switzerland">
</div>
...
</main>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| main {
display: grid;
/*grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));*/
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 1rem;
}
main .card img {
width: 100%;
}
main .card {
transition: transform 500ms;
}
main .card:hover {
transform: translateY(-10px);
} |
main {
display: grid;
/*grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));*/
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 1rem;
}
main .card img {
width: 100%;
}
main .card {
transition: transform 500ms;
}
main .card:hover {
transform: translateY(-10px);
}
0 Kommentare