Verwendung: Startseite und Menüpunkte optisch anpassen

Bernhard's Avatar

Bernhard

02 Sep, 2020 12:48 PM

Produkt: Open Sauce Contao
Contao-Version: 4.4.26
Browser und Browserversionen: Firefox 80.0.1

Hallo!
Ich möchte bei einer bestehenden Website die Startseite anpassen und bin auf der Suche nach dem korrekten css-Code. Vorbild ist diese Website: https://www.ainsteinshop.com/ und dort der mittlere Bereich, bei welchem sich die Bilder beim hoovern als Text verändern und ein Klick auf die Unterseite führt.
Das Einrichten der Bilder und der Verlinkung ist nicht das Problem aber wie kann ich diesen 'Hoover-Text-Farbe-Effekt' erzielen? Können Sie mir bitte einen Hinweis oder Tipp geben. DANKE!

  1. Support Staff 1 Posted by RockSolid Theme... on 02 Sep, 2020 01:37 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Sie können den Text innerhalb des Link-Elements als eigene Ebene einfügen und diese einblenden sobald die Maus über den Link fährt. Der HTML-Code dafür könnte z. B. folgendermaßen aussehen:

    <a href="" class="bild-link">
        <img ...>
        <span class="bild-link-text">Text</span>
    </a>
    

    Mit dem dazugehörigen CSS:

    .bild-link {
        display: block;
        position: relative;
    }
    .bild-link > .bild-link-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .bild-link:hover > .bild-link-text {
        opacity: 1;
    }
    

    Einen ähnlichen Effekt finden Sie in unserem Theme Oneo bei den Portfolio-Boxen: https://demo.rocksolidthemes.com/contao/oneo/portfolio

  2. 2 Posted by Bernhard Teppan on 02 Sep, 2020 01:56 PM

    Bernhard Teppan's Avatar

    Perfekt und vielen Dank für die superschnelle Antwort!
    Eine Frage noch:
    Wenn ich beim hovern ein anderes Bild anzeigen möchte, wie müsste der Code dann aussehen?

  3. Support Staff 3 Posted by RockSolid Theme... on 03 Sep, 2020 06:25 AM

    RockSolid Themes's Avatar

    Anstatt des <span>-Tags könnten Sie z. B. einen zweiten <img>-Tag verwenden.

  4. 4 Posted by Bernhard Teppan on 03 Sep, 2020 07:47 AM

    Bernhard Teppan's Avatar

    Alles klar! Vielen Dank!

  5. 5 Posted by Bernhard on 02 Nov, 2020 05:38 PM

    Bernhard's Avatar

    Hallo!
    Darf ich meine Anfrage um eine weitere Option ergänzen:
    Auf Smartphones werden derzeit die Bilder angezeigt und da es ja hier keine Maus zum hoovern gibt, wäre es sinnvoll auch oder nur den Text anzuzeigen. Ich vermute das geht mit einer @media screen-Anweisung.
    Wie müsste diese sinngemäß lauten?
    Vorweg schon vielen Dank für ihre Unterstützung!

  6. Support Staff 6 Posted by RockSolid Theme... on 03 Nov, 2020 09:05 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Dafür können Sie z. B. folgenden CSS-Code verwenden:

    @media (hover: none) {
        .bild-link > .bild-link-bild {
            opacity: 0.95;
            transition: 0.5s;
            color: #e64415;
            font-size: 2.5em;
            background-color: #fffaed;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    

    Der Media-Query (hover: none) ist für Browser aktiv deren primäres Eingabegerät keine Hover-Funktionalität unterstützt.

  7. 7 Posted by Bernhard Teppan on 03 Nov, 2020 09:16 AM

    Bernhard Teppan's Avatar

    Super! Vielen Dank für die Information!!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac