Anzeige

Element bei Hover Fixieren


#1
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
}
 
Anzeige

Neue Beiträge

Anzeige