Element bei Hover Fixieren
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
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
a{
}
#wrapper{
margin-top:20px;
margin-left:15%;
margin-right:15%;
}
.parent{
width: 300px;
height:300px;
overflow: hidden;
position:relative;
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
transition: all .5s;
text-align: left;
font-size: 15px;
color: #ffffff !important;
font-family: arial;
background-image: url(/image/gravatar,jpg);}
.parent:hover{
transform: scale(1.05);
filter: saturate(2);
}
#wrapper>a{
z-index:1;
position:relative;
top:40px;
text-decoation:none;
color:white;
font-size:25px;
left:5px;
}
@media screen and (min-width: 960px) {
.parent {width: 100%; margin: 20px 0px}
}
</style>
<div id="wrapper">
<a href="#">Mercedes</a>
<div class="parent" onclick=""> </div>
</div>