Beiträge von kvnhmn

    Ja... jetzt sind wir wohl auf dem gleichen Stand.

    Auf die Schnelle fällt mir da erst mal ein pointer-events: none; im CSS für das <span>...</span> und <p>...</p> Element ein, um den Zoom-Effekt aufrecht zu erhalten.

    Hat aber den Nachteil, dass du diese Beiden Elemente danach nicht mehr als Link nutzen kannst, denn ein Klick auf diese Elemente würde immer das darunterliegnde <a> treffen.

    Solltest du beabsichtigen irgendwann mal die zB die Schaltfläche BLOG als Link nutzen zu wollen, müsstest du den Code anders aufbauen... vielleicht würde da meine Idee aus Beitrag #9 besser funktionieren - habe ich aber nicht ausprobiert..

    Nun, zweck war es, die ganze Fläche als Link zu nutzen.


    DONE;


    Es funktioniert, hat sich erledigt - Danke!

    Habe das Bild in "Dateianhänge" hochgeladen. Anscheinend ist SVG nicht erlaubt.


    Hatte ein Fehler im Quellcode den ich Ihnen geschickt habe.

    Wie gesagt nutze LESS, war für mich etwas unübersichtlich auf das CSS zu schauen :D



    Hier noch mal CSS:

    Link zum Bild schicken.

    https://www.flaticon.com/free-…m=blog&page=1&position=27

    NOCHMAL HTML:


    Code
    <a id="ix-sec-one-blog" href="blog.php">
    <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
    <span>blog</span>
    <p>text</p>
    </a>


    Abgesehen davon dass es less war

    hier NOCHMAL CSS:


    Es funktioniert und das Bild ist auch zu sehen!

    HIER IM HOVER: https://i.imgur.com/wibNUjL.png

    HIER OHNE HOVER: https://i.imgur.com/cdqtE4U.png

    Dein Code stimmt nicht mit dem überein, was du in deinem Anfangsbeitrag beschrieben hast????

    Du hast du nur ein :hover in Code und dieses :hover beeinflusst nur das <span>blog</span> (opacity)... das Hintergrundbild, welches nach deiner Beschreibung gezoomt werden soll, dürfte gar nicht angezeigt werden, weil das <div> mit diesem Hintergrund keine Höhe hat... und mit 0 Höhe hat der Hintergrund auch keine Höhe!

    Bitte überprüfe das mal und poste den richtigen und vollständigen Code - besser noch einen Link zur Seite.

    CSS/LESS:


    html:


    Code
    <a id="ix-sec-one-blog" href="blog.php">
                        <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
                        <span>blog</span>
                        <p>text</p>
                    </a>

    1. du solltest in Zeile 4 den <p> Tag korrekt mit </p> schließen ... nicht mit </>

    2. wie sieht das CSS zu deinem Code aus?

    Das mit dem </> war hier nicht mit aus versehen.


    CSS wie folgt:

    Hey,


    ich hab eine Frage und zwar habe ich folgenden html Code:

    Code
    <a id="ix-sec-one-blog" href="#">
        <div class="ix-sec-bg" style="background:url(src/assets/blog.svg);"></div>
        <span>blog</span>
        <p>Text...</>
    </a>

    Das sieht dann in etwas so aus:

    https://i.imgur.com/uHrosHU.png


    Nun, wenn ich über diesen a-Block mit der Maus gehe,dass Hintergrundbild etwas zoomt, dass klappt. Soweit alles gut, aber sobald ich über meinen Text ("text...") gehe oder über mein <span>-Element, dann bricht der Zoom ab. Ich will aber das der Zoom erhalten bleibt, egal über welches Element ich drüber gehe.


    Hoffe es ist Verständlich erklärt - sorry :D

    Mfg