Wenn man mehrere Bilder auf einer Webseite anzeigen soll dann greifen viele Webdesigner auf die Galerie zurück. Das kann natürlich sehr schön sein – aber manchmal will man was kreativieres. Heute zeige ich euch einen solchen kreativen Weg – wir werden nämlich mehrere Bilder in einem Bild verpacken. Wenn man dann mit der Maus über so ein Bildstück fährt, dann sieht man dann das ganze Bild. Das ist also ein sehr platzsparende Sache.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="container">
<div class="image bild1">
<div class="text">Berge</div>
</div>
<div class="image bild2">
<div class="text">Dorf</div>
</div>
<div class="image bild3">
<div class="text">Stadt</div>
</div>
</div> |
CSS
Denkt daran, dass ihr die Clip Path für eure Zwecke anpassen müsst und schaut das ihr genau arbeitet, sonst gibts diese farbigen Striche im Bild. Das kann natürlich auch hübsch aussehen 🙂
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | .container {
position: relative;
width: 800px;
height: 500px;
background: #fbff00;
}
.container .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 500ms;
}
/* https://bennettfeely.com/clippy/ */
.container .image.bild1 {
background: url(pic1.jpg);
background-size: cover;
clip-path: polygon(0 0, 60% 0, 25% 100%, 0% 100%); /* passt es für euch an */
}
.container .image.bild2 {
background: url(pic2.jpg);
background-size: cover;
clip-path: polygon(60% 0, 80% 0, 60% 100%, 25% 100%); /* passt es für euch an */
}
.container .image.bild3 {
background: url(pic3.jpg);
background-size: cover;
clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 60% 100%); /* passt es für euch an */
}
.container:hover .image {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.container .image:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.container .image:hover .text {
position: absolute;
bottom: -100%;
/* 0 = -100% */
left: 0;
width: 30%;
padding: 20px;
background: #fff;
opacity: 0;
transition: 500ms;
}
.container .image:hover .text {
bottom: 0;
opacity: 1;
}
.text {
opacity: 0;} |
0 Kommentare