Hover Effect

Hallo liebe Community

und zwar würde ich gerne auf einer Seite ein Bild einbinden mit einem Hover Effekt.
Wenn man mit der Maus darüber geht, soll es blasser werden und ein Text in der Mitte erscheinen.
Das ganze muss dann aber auch noch per klick auf eine weitere Seite führen.
Ich habe den ganzen gestrigen Abend und den heutigen Morgen damit verbracht, bin mit meinem
Latein jedoch einfach am Ende. HTML-Code wurde aus dem Wordpress-Editor und CSS Code
aus Custom CSS rauskopiert.

HTML-Code:

<div class="Übergang">
<a href="Hier ist der Link" >
<img src="Das ist das Bild.jpg" />
<div class="ÜbergangText">Hier steht der Text</div>
</a>
</div>

CSS-Code:

.Übergang {
position: relative;
}

.Übergang img {
width: 55%;
height: auto;
opacity: 1.0;
transition: all 1s linear;
-webkit-transition: all 1s linear ;
-moz-transition: all 1s linear ;
-ms-transition: all 1s linear ;
-o-transition: all 1s linear ;
}

.Übergang img:hover {
opacity: 0.6;
}

.ÜbergangText {
position: absolute;
top: 50%;
left: 50%;
font-size: 4vw;
opacity: 0;
transition: all 1s linear;
-webkit-transition: all 1s linear ;
-moz-transition: all 1s linear ;
-ms-transition: all 1s linear ;
-o-transition: all 1s linear ;
}

.ÜbergangText:hover {
opacity: 1;
}

Die Hover Effekte funktionieren sowohl bei dem Bild, als auch bei dem Text einwandfrei.
Allerdings ist der Text überhaupt nicht wie gewünscht in der Mitte des Bildes, sondern
ganz rechts und zur Hälfte außerhalb des Bildes. Warum?

Wahlweise habe ich auch schon ein fertiges Hover-Bild mit Text, allerdings habe ich
es nicht geschafft eine Transition von Bild zu Bild zu erzeugen. Sobald ich die Größe
in % angegeben habe hat die Transition einfach nichtmehr funktioniert. Allerdings sollte
die obere Variante sowieso verträglicher für die Ladegeschwindigkeit sein, da nur ein Bild
geladen werden muss anstatt zwei.


Über eure Hilfe würde ich mich sehr freuen!
Liebe Grüße

 

ok schonmal vielen Dank für deine Hilfe
Die Klassennamen habe ich direkt umbenannt in "Ubergang"

Das Div "Ubergang" habe ich auf width: 55%; gestellt, damit es so
breit ist wie das img. Allerdings ist darauf hin das img etwas zusammengeschrumpft
und der Text hing immer noch an der selben Stelle aus dem Bild.

Hast du zufällig einen Lösungsvorschlag dafür? Der Text orientiert sich ja immer noch
nicht an dem Bild.

 

Ok super, funktioniert alles reibungslos, vielen Dank!
Habe auch noch die Font-family und Farbe + Größe geändert, hat
auch alles problemlos funktioniert. Danke nochmal

 

Kleiner Nachtrag:

Gibt es eine Möglichkeit das ganze zu zentrieren ohne eine weiteren Div-Container zu benutzen?
Ich hatte es mit

margin-left: auto;
margin-right: auto;

bei ".uebergang" und ".uebergang img" probiert, allerdings ohne Erfolg.

 

was meinst du denn mit Rahmenbedingungen?

also derzeit sieht das html so aus:

<a class="Uebergang" href="Hier ist der Link">
<img src="http://veganvergleich24.de/wp-content/uploads/2018/03/Veganes-Gebäck.jpg" />
<span>Hier steht der Text</span>
</a>

und das css so:

.Uebergang {
position: relative;
display: inline-block;
}

.Uebergang img {
width: 30vw;
opacity: 1.0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out ;
-moz-transition: all 0.5s ease-in-out ;
-ms-transition: all 0.5s ease-in-out ;
-o-transition: all 0.5s ease-in-out ;
}

.Uebergang:hover img {
opacity: 0.45;
}

.Uebergang span {
font-size: 1.9vw;
font-family: 'Quicksand', sans-serif;
color: #444444;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out ;
-moz-transition: all 0.5s ease-in-out ;
-ms-transition: all 0.5s ease-in-out ;
-o-transition: all 0.5s ease-in-out ;
}

.Uebergang:hover span {
opacity: 1;
}

Jedoch scheint in keiner der Klassifizierung "text-align: center;" zu funktionieren

 

komisch, auf einmal hat es funktioniert, obwohl ich genau das bereits probiert hatte.
Vielleicht ein Schreibfehler o.ä. Aber vielen Dank für deine Mühe, auch dass du das
ganze immer in ein Beispiel geschrieben hast, das hat sehr geholfen