Im letzten Video habe ich ja gezeigt wie man eine Masonry Galerie in Divi erstellen kann, ohne das man zusätzlich ein neues Plugin installieren muss (Divi: Masonry Galerie erstelle ohne zusätzliches Plugin). Und heute zeige ich euch wie ihr nun die Titel und Beschreibung eines Bild über die Bilder legen könnt – und zwar mit dem Galerie Modul – also das könnt ihr mit der normalen Galerie in Divi machen wie auch mit der Masonry Galerie.
Diese kleine Trick pimpt eure Galerie massiv auf und ja auch diese Aktion braucht kein zusätzliches Plugin, nur ein wenig CSS und Javascript 🙂
Video
CSS Klassenname eingeben
Als erstes gebt ihr der Gallerie eine eigene CSS Klassennamen wie zb hier:
1 | cb-text-ueber-gallery-bild |
Javascript
Als nächstes geht ihr
1 2 3 4 5 6 7 8 9 | <script>
(function ($) {
$(document).ready(function () {
$(".cb-text-ueber-gallery-bild .et_pb_gallery_item").each(function () {
$(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="pa-gallery-text"></div>');
});
});
})(jQuery);
</script> |
CSS
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 | /*
Text über DIVI Gallerie Bilder legen
*/
.cb-text-ueber-gallery-bild .et_pb_gallery_item {
position: relative;
}
.cb-text-ueber-gallery-bild .et_pb_gallery_title {
margin: 0 !important;
}
.cb-text-ueber-gallery-bild .et_overlay {
z-index: 1;
}
.cb-text-ueber-gallery-bild .pa-gallery-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: rgba(17, 17, 17, 0.8);
opacity: 0;
transition: all .5s ease-in-out;
}
.cb-text-ueber-gallery-bild .et_pb_gallery_item:hover .pa-gallery-text {
opacity: 1;
}
.cb-text-ueber-gallery-bild .et_overlay {
pointer-events: all !important;
} |
0 Kommentare