dk_masonry - Bildergalerie - hover Effekt möglich?

[tilda]

Guten Morgen,

ich habe mir die Bildergalerie dk_masonry installiert.
Ist es möglich, einen hover Effekt zu erzeugen, bei dem das Bild mit Text überblendet wird?
Beste Grüße
Tilda

[Kahmoon]

Du meinst so wie hier?

Das mache ich per jQuery toggle

j_masonry_hovercaption.html5

<script type="text/javascript">
$(document).ready(function() {
    $(".masonry_gallery").hover(function()
    {
        $(this).find(".caption").fadeToggle();
    });
});
</script>

[tilda]

Genau.
Nur das das Bild auch noch etwas in den Hintergrund tritt, durch einen transparenten weissen Schleier.

[Kahmoon]

Dafür müsstest du das Script ein wenig erweitern und das Bild per CSS verändern oder einfach die Caption 100% breit und hoch machen.

[tilda]

Dafür bräuchte ich leider eine kleine Hilfe.

[Kahmoon]

Ich kann das hier gerade nicht testen.

[Spooky]

Ich würde das alles mit CSS machen

figure {
    position:relative;
}

figure:after {
    opacity:0;
    visibility:hidden;
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(255,255,255,0.2);
    z-index:1;
    transition:0.4s;
}

figure:hover:after {
    opacity:1;
    visibility:visible;
}

figure figcaption {
    opacity:0;
    visibility:hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    color:white;
    text-align:center;
    padding:4px 0;
    z-index:2;
    transition:0.4s;
}

figure:hover figcaption {
    opacity:1;
    visibility:visible;
} 

http://jsfiddle.net/j93h4n8o/

[tilda]

SUPER DANKE!!!

Es hat geklappt!

[tilda]

Eine Frage bleibt natürlich...

Ich möchte gerne von dem Bild eine Verlinkung auf eine Unterseite haben.
Unter Dateiverwaltung habe ich Titel und Link eingefügt, aber es klappt leider nicht
{{link_url::192}}
Muss ich da noch etwas beachten?

[Spooky]

Link zur Seite?

[tilda]

http://ivoweber.de/contao/index.php/werkgruppen.html

Nur das erste Bild oben links ist verlinkt!

[Spooky]

Ist es auch, jedoch verursacht mein CSS, also im Genauen

figure:after {
    opacity:0;
    visibility:hidden;
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(255,255,255,0.2);
    z-index:1;
    transition:0.4s;
}

figure:hover:after {
    opacity:1;
    visibility:visible;
} 

dass die weiße, transparente Fläche über dem Link liegt, daher kann auch nichts geklickt werden. Füge noch folgendes hinzu:

figure:after,
figure figcaption {
    pointer-events:none;
} 

[tilda]

Vielen Dank, jetzt klappt alles!

[folkfreund]

pointer-events:none; 

Schöne Idee! Danke.
Funktioniert aber leider im IE erst ab Version 11 :-(

folkfreund

[Spooky]

Hm, ja, eigentlich gibt es ja eine viel einfachere Lösung:

figure {
    position:relative;
    background:white;
}

figure img {
    display:block;
    max-width:100%;
    height:auto;
}

figure:hover img {
    opacity:0.8;
}

figure figcaption {
    opacity:0;
    visibility:hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    color:white;
    text-align:center;
    padding:4px 0;
    z-index:2;
    transition:0.4s;
}

figure:hover figcaption {
    opacity:1;
    visibility:visible;
} 

http://jsfiddle.net/j93h4n8o/1/

[tilda]

Leider ist die weisse lasierende Fläche verschwunden, und wenn ich versuche diese wieder einzufügen, ist es nicht mehr klickbar!

mhm?

[Spooky]

Du brauchst

figure:hover img {
    opacity:0.8 !important;
} 

weil masonry opacity:1; als inline-style beim <img> setzt.

[tilda]

Vielen Dank- Alles sieht gut aus!

[Membaris]

Blöde Frage .... wie hast du das denn implementiert ?

[folkfreund]

Blöde Frage .... wie hast du das denn implementiert ?

Nix implementieren. Nur die CSS-Fragmente in das eigene CSS übernehmen.

[Membaris]

Und im Contao ? Welche Elemente und Anordnung ?

[Membaris]

Ich hab da scheinbar echt einen Knoten im Kopf ?!? Ich bekomme den Hovertext nicht so hin wie er soll oder hast du das mit einem eigenen HTML Klotz gelöst ?

[Spooky]

Das sind einfach die Bildunterschriften.

[Membaris]

Hmm ok daran hatte ich nicht gedacht ....

Wenn ich jetzt aber etwas unterschiedliche formatierungen usw haben möchte komme ich nicht um ein eigenes Element rum oder ?

[tilda]

Einfach in der CSS ergänzen.
Hilft die das weiter?

.msry_theme_standard .masonry_gallery {
    margin-bottom: 10px;
    padding: 0px;
    background-color: rgb(245, 245, 245);
    border-radius: 0px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 1px 5px rgba(0, 0, 0, 0.1);
}
.msry_theme_standard .masonry_gallery figcaption {
    box-sizing: border-box;
    position: absolute;
    bottom: 80px;
    padding: 3px 6px;
    z-index: 1;
    color: rgb(0, 0, 0);
    background: transparent none repeat scroll 0% 0%;
    opacity: 0;
    font-size: 30px;
    text-transform: uppercase;
}

[Spooky]

Hmm ok daran hatte ich nicht gedacht ....

Wenn ich jetzt aber etwas unterschiedliche formatierungen usw haben möchte komme ich nicht um ein eigenes Element rum oder ?

Dann machst du das nicht mit der dk_masonry Bildergalerie sondern mit den dk_masonry Umschlagelementen und eigenen Elementen dazwischen.

[Membaris]

Genau das hab ich versucht und nicht hinbekommen

masonry umschlag auf

Textelement mit Bild (Die schrift vom Text soll im Bild auftauchen)

nächstes

Textelement mit Bild (Die schrift vom Text soll im Bild auftauchen)

masonry umschlag zu

[Spooky]

Genau, dann passt ja alles

[tilda]

versuche es doch mit der Bildergalerie, dann klappt es auf jeden Fall!

[Dirch]

und bitte vorsichtig sein beim Verwenden von

.msry_theme_standard 

Stilen. Denn diese werden von dem "Standard"-Theme genutzt. Wenn man Teile der Stile daraus nutzen möchte wäre es am besten man kopiert sich das Theme-File und bindet es über die Import-Funktion ein.

Wenn ihr schöne Themes erschaffen habt und diese mit der Allgemeinheit teilen möchtet, kann ich sie auch mit in das Paket aufnehmen.