Beim hover element quasi ausblenden

kvnhmn

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 -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

Mfg

Sailor

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

2. wie sieht das CSS zu deinem Code aus?

kvnhmn

Zitat von Sailor

1. du solltest in Zeile 4 den Tag korrekt mit 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:

Code

#ix-sec-one-blog {
    width: calc(50% - 5px);
    height: calc(50% - 5px);
    margin-top: 5px;
    position: absolute;
    border-radius: 10px;
    left: 0;
    top: 0;
    display: block;
  }
  #ix-sec-one-blog:hover span,
  #ix-sec-one-blog p {
    opacity: 1;
    cursor: pointer;
    transition: all 200ms ease-in-out;
  }
  #ix-sec-one-blog span {
    background-color: yellow;
    font-family: 'Baloo Bhai', cursive;
    text-transform: uppercase;
    text-decoration: none;
    position: absolute;
    height: 30px;
    width: 30%;
    border-radius: 15px;
    text-align: center;
    padding: 3px;
    bottom: 30px;
    left: 25px;
    opacity: 0.6;
    transition: 0.3s;
  }
  #ix-sec-one-blog p {
    color: whitesmoke;
    font-family: 'Baloo Bhai', cursive;
    width: 75%;
    left: 25px;
    bottom: 95px;
    letter-spacing: 2px;
    position: absolute;
    z-index: 1;
  }

Alles anzeigen

Sailor

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 blog (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.

kvnhmn

Zitat von Sailor

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 blog (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:

Code

#ix-sec-one-blog{
    width: calc(50% - 5px);
    height: calc(50% - 5px);
    position: absolute;
    background-color: #cc0033;
    border-radius: 10px;
    left: 0;
    top: 0;
    overflow: hidden;
    border: 1px solid transparent;
    &:hover {
      border: 1px solid white;
    }
    &:hover span{
      opacity: 1;
      cursor: pointer;
      transition: all 200ms ease-in-out;
    }
    & span {
      background-color: yellowgreen;
      font-family: 'Baloo Bhai', cursive;
      text-transform: uppercase;
      text-decoration: none;
      position: absolute;
      border-radius: 15px;
      text-align: center;
      padding: 15px;
      bottom: 30px;
      left: 25px;
      opacity: 0.6;
      transition: 0.3s;

    }
    & p {
      color: whitesmoke;
      font-family: 'Baloo Bhai', cursive;
      width: 75%;
      left: 25px;
      bottom: 95px;
      letter-spacing: 2px;
      position: absolute;
      z-index: 1;
     }
  }

Alles anzeigen

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>

Sailor

Zitat von kvnhmn

Nun, wenn ich über diesen a-Block mit der Maus gehe,dass Hintergrundbild etwas zoomt, dass klappt.

... kann nicht sein - zumindest nicht mit dem HTML und CSS Code, den du gepostet hast!

Dein <div class="ix-sec-bg"...> hat weiterhin keine Höhenangabe und wird daher auch mit 0px Höhe angezeigt... das Hintergrundbild ist gar nicht sichtbar!

Es gibt im CSS keine Anweisung, die das 'zoomen' des Hintergrundbildes verursachen könnte.

Also poste bitte mal den richtigen und vollständigen Code, der bei dir funktioniert .. und dass bitte in der Syntax für CSS und nicht in der Syntax SASS.

Ebenso lade hier bitte dein Hintergrundbild hoch (blog.svg).

kvnhmn

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:

Code

#ix-sec-one-blog {
    width: calc(50% - 5px);
    height: calc(50% - 5px);
    position: absolute;
    background-color: #cc0033;
    border-radius: 10px;
    left: 0;
    top: 0;
    overflow: hidden;
    border: 1px solid transparent;
  }
  #ix-sec-one-blog:hover {
    border: 1px solid white;
  }
  #ix-sec-one-blog:hover span {
    opacity: 1;
    cursor: pointer;
    transition: all 200ms ease-in-out;
  }
  #ix-sec-one-blog span {
    background-color: yellowgreen;
    font-family: 'Baloo Bhai', cursive;
    text-transform: uppercase;
    text-decoration: none;
    position: absolute;
    border-radius: 15px;
    text-align: center;
    padding: 15px;
    bottom: 30px;
    left: 25px;
    opacity: 0.6;
    transition: 0.3s;
  }
  #ix-sec-one-blog p {
    color: whitesmoke;
    font-family: 'Baloo Bhai', cursive;
    width: 75%;
    left: 25px;
    bottom: 95px;
    letter-spacing: 2px;
    position: absolute;
    z-index: 1;
  }

Alles anzeigen

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

Sailor

Ja... dann scheint es einen gravierenden Unterschied zwischen deinem System und meinem System zu geben.

Ich teste das mit WIN 10 und FireFox 72.0.1 (IE11, Edge, Chrome und Opera liefern das gleiche Ergebnis).

Und bei mir sieht das so aus... ohne hover:

html-seminar.de/woltlab/attachment/2148/

und so mit hover...

html-seminar.de/woltlab/attachment/2149/

einzige Änderung von mir, ich habe zum testen das Hintergrundbild mit einem bei mir lokal gespeicherten Bild ausgetauscht... das Original von dir habe ich ja nicht.

Achte im oberen Bild mal auf die eingeblendete Größenangabe des 'div'.

Sailor

Teste doch bitte mal, ob der folgende Code bei dir funktioniert... zuerst den Inline Style mit dem 'background:url....' aus dem HTML Code löschen und dann den CSS Code zusätzlich deinem CSS Code hinzufügen.

Code

div.ix-sec-bg {
    height: 100%;
    background-image: url(src/assets/blog.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 80%;
    transition: 0.3s;
}
#ix-sec-one-blog:hover div.ix-sec-bg {
    background-size: auto 90%;
    transition: 0.3s;
}

Alles anzeigen

kvnhmn

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

Hier noch mal CSS:

CSS

#ix-sec-one-blog {
    width: calc(50% - 5px);
    height: calc(50% - 5px);
    position: absolute;
    background-color: #cc0033;
    border-radius: 10px;
    left: 0;
    top: 0;
    overflow: hidden;
    border: 1px solid transparent;
  }
  #ix-sec-one-blog:hover {
    border: 1px solid white;
  }
  #ix-sec-one-blog:hover span {
    opacity: 1;
    cursor: pointer;
    transition: all 200ms ease-in-out;
  }
  #ix-sec-one-blog span {
    background-color: yellowgreen;
    font-family: 'Baloo Bhai', cursive;
    text-transform: uppercase;
    text-decoration: none;
    position: absolute;
    border-radius: 15px;
    text-align: center;
    padding: 15px;
    bottom: 30px;
    left: 25px;
    opacity: 0.6;
    transition: 0.3s;
  }
  #ix-sec-one-blog p {
    color: whitesmoke;
    font-family: 'Baloo Bhai', cursive;
    width: 75%;
    left: 25px;
    bottom: 95px;
    letter-spacing: 2px;
    position: absolute;
    z-index: 1;
  }
  .ix-sec-bg {
    position: absolute;
    width: 100%;
    background:url(blog.svg);
    height: 100%;
    background-size: 100% 100% !important;
    background-position: center;
    transition: all 500ms ease-out;
    opacity: 0.5;
  }
  .ix-sec-bg:hover {
    transform: scale(1.2);
  }
  .ix-sec-bg:hover span:hover {
    opacity: 1;
    cursor: pointer;
  }

Alles anzeigen

Link zum Bild schicken.

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

Sailor

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 ... und ... 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..

kvnhmn

Zitat von Sailor

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 ... und ... 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!

Beim hover element quasi ausblenden

Jetzt mitmachen!

Tags