Element bei Hover Fixieren

Mika Franke

Grünschnabel
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

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

CSS:
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
}
 
Zurück