Element bei Hover Fixieren

[Mika]

Hallo. Ich versuche für den Aufbau einer Autoseite(nur ganz grob) einen Text oben links zu fixieren, der sich bei einem Mouseover, bzw Hover, nicht bewegt. Was ich meine, wird gleich hoffe ich mal zu sehen sein. Ich hoffe ihr könnt mir helfen. Liebe Grüße

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="wrapper">
    <div class="parent" onclick="">
        <div class="child car-one">
<p class="auto">Mercedes</p>
            <a href="#"></a>
        </div>
    </div>
</div>

html, body {
    margin:0px; padding: 0px; margin-left:37px;
}
 
.wrapper {
    max-width: 1200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top:-7px;
}
 
.parent {
    width: 100%;
    height: 300px;
    border: none;
    overflow: hidden;
    position: relative;
    display: inline-block;
    cursor: pointer;
}
 
.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-filter: none;
    -ms-filter: none;
    -moz-filter: none;
    -o-filter: none;
    filter:none;
    vertical-align:top;
    text-align: left;
    font-size: 15px;
    color: #ffffff !important;
    font-family: arial;
}
 
.car-one {background-image: url(http://webwonder-media-test.info/wp-content/uploads/2018/03/amg-1880381_1920.jpg);}
 
a {
    cursor: pointer;
}
 
.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: saturate(2);
    -moz-filter: saturate(2);
    -o-filter: saturate(2);
    -ms-filter: saturate(2);
    filter: saturate(2);
}
 
.parent:hover .child:before, .parent:focus .child:before {
    display: block;
}
 
.parent:hover a, .parent:focus a {
    display: block;
}
 
.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;  
}
 
/* Media Queries */
@media screen and (max-width: 960px) {
    .parent {width: 100%; margin: 20px 0px}
        .wrapper {padding: 20px 20px;}
}
.hello {
    display: none
}

[Matthias Apsel]

Hallo Mika,

Live-Beispiel bitte.

Bis demnächst
Matthias

[Rolf B]

(Sorry Matthias, war schon fertig als ich deine Mahnung gesehen habe)

Hallo Mika,

ich denke, du meinst sowas hier. Aber Matthias hat recht, bevor man Codewüsten ins Forum postet, baut man das Problem entweder in einem Weblabor wie JSFiddle oder CodePen nach oder schickt gleich den Link auf die eigene Seite.

Hoffentlich brauchst Du die ganze Wrapperei nicht für andere Dinge; für deinen Zoom-Effekt jedenfalls nicht. Dafür reicht

<div class="zoomBox">
      <a class="car-one" href="#">Mercedes</a>
</div>

Dein CSS habe ich für's Forum mal um "unwichtige" Definitionen bereinigt (html/body/Media Query), es reduziert sich etwas. Die Font-Angabe musst Du noch ändern, nur Arial ist zu wenig für's Web. Was hier entsteht, ist ein Wrapper zum Zentrieren, darin das a als Textträger und Link. Über ::before wird das Bild eingehängt und mit position:absolute und z-index:-1 unter den Text geschoben. Dass a das Hauptelement ist, hat den weiteren Vorteil, dass man es ohne weiteres fokussieren kann. Das ging mit div nicht.

Die ganzen Vendor-Präfixe habe ich weggelassen. Soweit ich weiß, sind die bei diesen Eigenschaften für aktuelle Browser nicht mehr nötig.

.zoomBox {
    max-width: 800px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    overflow: hidden;
    position: relative;
}
 
.zoomBox a {
    display: block; 
    height: 100%; width: 100%;
    padding-top: 1em;
    vertical-align:top;
    text-decoration: none; 
    color: #ffffff;
    font-family: arial;
    text-align: left;
    font-size: 15px;
}

.zoomBox a::before {
  content:""; width: 100%; height: 100%; 
  position: absolute; top: -1em; z-index: -1;
  transition: all 0.5s; 
  filter:none;
  background-image: url(http://webwonder-media-test.info/wp-content/uploads/2018/03/amg-1880381_1920.jpg);
  background-size: 100%; background-repeat: no-repeat;
}

.zoomBox a:hover::before, .zoomBox a:focus::before  {
    transform: scale(1.05);
    filter: saturate(2);
}

Wie ich mich kenne, kriege ich jetzt noch ein paar Korrekturen um die Ohren gehauen 😀

Rolf

[Mika]

Super! Ich denke dir vielmals. Nun jetzt habe ich aber das Problem, dass ich mehrere verschiedene Autos nicht darstellen kann. Gibt's da nen kleinen Trick? 😉

[Rolf B]

Hallo Mika,

kommt drauf an was du darstellen willst.

Mehrere dieser Zoomboxen auf einer Seite? Unterschiedliche Seiten, die jede eine Zoombox mit eigenem Auto haben? Eine Seite, wo in der Zoombox das Autobild periodisch wechselt?

Du hast php als Tag gesetzt - bisher haben wir das nicht gesehen. Ist dein Server per PHP-Script gebaut? Je nach dem könnte man von dort was steuern; das background-image ist vermutlich nicht das beste Mittel.

Aber erstmal brauchen wir deinen Plan.

Rolf

[Mika]

Hallo, hat sich selber mit ein bisschen Nachdenken geregelt. Ich bedanke mich nochmal vielmals.

-Mika

[Gunnar Bittersmann]

@@Rolf B

ich denke, du meinst sowas hier. […] Wie ich mich kenne, kriege ich jetzt noch ein paar Korrekturen um die Ohren gehauen 😀

Ja, natürlich. Man sieht: nichts. Weißer Adler auf weißem Grund.

Wann immer man die Schriftfarbe auf weiß (oder andere Farbe) setzt, muss man auch eine Hintergrundfarbe (mit hohem Farbkontrast) angeben. Man kann sich nie darauf verlassen, dass ein Hintergrundbild geladen und angezeigt wird. (Was auch immer bei http://webwonder-media-test.info/wp-content/uploads/2018/03/amg-1880381_1920.jpg zurückkommt, ein Bild ist es nicht.)

Ergänzen: .zoomBox a::before { background-color: black }

.zoomBox {
    max-width: 800px;
    height: 300px;

Variable Breite und feste Höhe passt nicht so gut zusammen. Man sieht nur den oberen Teil des Bildes – oder es ist unter dem Bild (in der Vertikalen) einiger Freiraum (in der Hintergrundfarbe, s.o.).

Ich sehe auch (so ziemlich) jegliches Auftreten von px im Stylesheet als Fehler an.

Die Font-Angabe musst Du noch ändern, nur Arial ist zu wenig für's Web.

Zumal Arial als display font (Überschriften, Banner, Poster etc.) hässlich und als Fließtextschrift nicht besonders gut lesbar ist. Wie Erik Spiekermann sagt: „[Arial] wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen.“ (Außer Banausen.)

LLAP 🖖