Frage an die CSS-Profis

1. offizieller Beitrag

    Hallo,

    sorry - scheine gerade wohl der einzige zu sein, der hier fragend unterwegs ist aber dazu ist ein Forum ja da.

    Ich hätte da noch eine CSS-Frage.

    Die Kategorieansicht hab ich dank den Tips von MrMusik etwas pimpen können mit dem Ringbucheffekt links am Rande der Kategorierahmen.

    Code
    img.jg_photo {
border-left: 15px solid transparent;
padding-left: 0px;
border-image: url(/images/spiral.png) 0 0 0 20 round;
box-shadow: 6px 6px 8px #666;
}

    Hier kann man das anschauen:

    https://onki.de/bildergalerie

    Was mich noch stört ist der Mouseover-Effekt, bei dem das Ringbuch verschwindet.

    Wo im CSS-Code muss ich ansetzen, damit der Ringbuch-Effekt auch bei Mouseover besteht und sich lediglich der schmale weiße Rahmen um das Bild (also der Raum zwischen Bild und Schatten) etwas verdunkelt um die aktiv im Fokus befindliche Kategorie darzustellen?

    Im Default-CSS (CSS-Manager) finde ich keinen "hover" Eintrag weshalb ich etwas verwirrt bin, wie dieser Effekt entsteht.

    Und wie bekomme ich die Kategoriebezeichnung ein kleines bischen weg von dem Rahmen (ist mir unten etwas zu nah dran?
    Hab es im CSS-Inspektor mit Margin versucht ohne Auswirkung. Vielleicht bin ich aber auch am falschen Objekt gewesen (war nur eine 141 Pixel breite Box).

    CSS und ich sind leider keine guten Kumpels;(.

    Gruß

    Onki

    • Offizieller Beitrag

    Um einen Abstand zwischen Vorschaubild und Kategoriebezeichnung zu bekommen, füge diesen CSS code hinzu:

    Code
    .jg_photo_container_l, .jg_subcatelem_photo_l {
    margin-bottom: 10px;
}


    Um den Hover-Effekt zu entfernen ändere dein CSS

    Code
    img.jg_photo {
    border-left: 15px solid transparent;
    padding-left: 0px;
    border-image: url(/images/spiral.png) 0 0 0 20 round;
    box-shadow: 6px 6px 8px #666;
}

    um zu

    Code
    img.jg_photo, a:hover img.jg_photo, .jg_minis a:hover img {
    border-left: 15px solid transparent;
    padding-left: 0px;
    border-image: url(/images/spiral.png) 0 0 0 20 round;
    box-shadow: 6px 6px 8px #666;
}

    Ich hoffe, das ist was du erreichen wolltest ;)

    Wir sind auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!
    Melde dich bei Interesse bei mir (Elfangor93).
    (Verfügbare Jobs: PHP-Entwicklung, Testen, Übersetzen, Dokumentation)

    Danke,

    Das funzt schon mal soweit. Perfekt wäre es halt wenn beim Mouseover nur der dünne, weiße Rahmen etwas gräulich oder so würde. Ist aber wirklich nur eine Art Sahnehäubchen.

    Gruß und Danke für die Hilfe

    Onki