Beim hover element quasi ausblenden

kvnhmn · 7. Januar 2020

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

Mfg

Sailor · 7. Januar 2020

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?

kvnhmn · 8. Januar 2020

Sailor schrieb:

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:

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 · 8. Januar 2020

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.

kvnhmn · 10. Januar 2020

Sailor schrieb:

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:

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 · 10. Januar 2020

kvnhmn schrieb:

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 · 10. Januar 2020

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 · 10. Januar 2020

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:

ohne_hover.jpg

und so mit hover...

mit_hover.jpg

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 · 10. Januar 2020

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 · 10. Januar 2020

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:

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;
}
.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-…m=blog&page=1&position=27

Sailor · 10. Januar 2020

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

kvnhmn · 13. Januar 2020

Sailor schrieb:

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!

Tags