When I hover over the image, the entire color of the container it's in, including the footer, changes, which I don't want. I only want the color of the image to change, but not the footer. I think it's because the footer is in the child element of the entire container in which the image is located, but if I took it out, the position of the footer would no longer align with the position of the image, which I don't want. What can I do to solve the problem?
<body>
<header>
<div class="container">
<nav class="navbar"><a href="/" class="nav-branding">TEST</a>
<ul class="nav-menu">
<li class="nav-link"><a href="/">ABOUT US</a></li>
<li class="nav-link"><a href="/">CONTACT</a></li>
<li class="nav-link"><a href="/">IMPRESSUM</a></li>
</ul>
</nav>
</div>
</header>
<div id="picture-container">
<div class="picture"><img class="bau-picture" src="https://images.pexels.com/photos/5288770/pexels-photo-5288770.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Bild ist nicht verfügbar">
<div class="footer">
<h5>GERÜSTBAU</h5>
</div>
</div>
<div class="picture"><img class="bau-picture" src="https://images.pexels.com/photos/8853507/pexels-photo-8853507.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Bild ist nicht verfügbar">
<div class="footer">BAU</div>
</div>
</div>
</body>
</html>
/* Allgemeine Stile */
* {
padding: 0;
margin: 0;
font-family: "Anta", sans-serif;
font-weight: 400;
font-style: normal;
box-sizing: border-box;
}
/* Body-Stile */
body {
position: relative;
}
/* Header-Stile */
header {
position: sticky;
top: 0;
width: 100%;
padding-left: 2%;
/* Linker äußerer Abstand */
padding-right: 2%;
/* Rechter äußerer Abstand */
}
/* Listen-Stile */
li {
list-style: none;
}
/* Link-Stile */
a {
text-decoration: none;
}
/* Navbar-Stile */
.navbar, .navbar a {
color: black;
}
/* Markenlogo-Stile */
.nav-branding {
font-size: 1.875rem;
}
/* Navbar-Stile */
.navbar{
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Menü-Stile */
.nav-menu{
display: flex;
justify-content: space-between;
gap: 3.75rem;
}
/* Bildcontainer-Stile */
#picture-container {
margin: auto;
display: flex;
flex-direction: row;
margin-left: 2%;
/* Linker äußerer Abstand */
margin-right: 2%;
/* Rechter äußerer Abstand */
/* padding-right: 2%;
*/
}
/* Container-Stile */
.container {
width: 100%;
margin: auto;
}
/* Bild-Stile */
.picture {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid;
margin-right: 2%;
margin-left: 2%;
}
/* Erster Fußbereich-Stile */
.footer:first-child {
border-top: none;
}
/* Fußbereich-Stile */
.footer {
border-top: 1px solid;
padding: 5px;
height: 8vh;
display: flex;
align-items: center;
text-align: left;
font-size: 4vh;
}
/* Media-Query-Stile */
.picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.picture:hover {
background: yellow;
}
/* Media Queries für Bildcontainer bei maximaler Breite von 1280px */
@media(max-width: 1280px) {
.picture-container {
width: calc(100% - 2 * 5%);
margin-left: 5%;
margin-right: 5%;
}
}
/* Media Queries für Bildcontainer bei mindestens 1024px Breite */
@media(min-width: 1024px) {
#picture-container {
height: 90vh;
}
}
/* Media Queries für Bildcontainer bei maximaler Breite von 768px */
@media(max-width: 768px) {
#picture-container {
flex-direction: column;
margin: 0;
}
.picture {
border-right: 1px solid;
/* Damit die Footer an seinem rechten Rand immer noch eine Trennlinie haben, wenn sie vertikal angeordnet werden*/
margin: 0;
}
}
I've already tried accessing just the image. I also tried setting the footer color to none, but to no avail.
It would be the easiest to just add the background to the
.footer. And you'll need to add the opacity to an image, as @CBroe mentioned.You might want to add the wrapper tag for an image to avoid specifying footer background but it would require layout changes.