Hallo,
Ich versuche einen Style durch einen etwas komplexeren Style zu ersetzen. Es handelt sich um ein Logo was an einem festen Punkt von der Seite plaziert wird. Im Hintergrund hat es eine slide show.
Wenn der Style
#logo01 {
position: fixed;
color: black;
background-color: black;
width: 280px;
height: 70px;
top: 30px;
left: 30px;
}
mit dem html code:
<div id="logo01"><img style="width: 287px; height: 71px;" alt="logo" src="images/logo01.jpg"><br>
</div>
verwendet wird kommt das Logo ganz normal und bleibt auch angezeigt, wenn der Seitenhintergrund ändert (wegen der Slide-Show)
Mein neuer Style ist dieser:
.logo02 {
position: fixed;
width: 280px;
height: 70px;
top: 30px;
left: 70px;
}
.image {
display: block;
width: 50%;
height: auto;
}
.overlay {
position: fixed;
top: 30px;
left: 30px;
opacity: 0;
transition: .5s ease;
background-color: transparent;
}
.logo02:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 10px;
background-color: blue;
position: fixed;
top: 120px;
left: 150px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
Das wird mit
<div id="logo02"><img style="width: 287px; height: 71px;" alt="logo" src="images/logo01.jpg"><br>
</div>
aufgerufen.
Aber das Logo wird dann nicht fest angezeigt sondern verschwindet jedesmal wenn der Background ändert.
Ich glaube, dass das daran liegt, dass beim neuen Style der Style-Name mit einem Punkt (.logo02) und nicht mit # (#logo01) anfängt und mein Html gar nicht diesen Style aufruft.
Wie muss das richtig heissen?
Danke,
brainstuf