I want to cause a zoom-in-effect without enlarge simultaneously img and overlap footer when I hover over the respectively img.
/* 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;
}
.site-wrapper {
overflow-x: hidden; /* Verhindert horizontales Scrollen innerhalb dieses Containers */
width: 100%; /* Stellt sicher, dass der Container die gesamte Breite der Seite einnimmt */
}
a {
color: #000;
}
/* header */
.header {
margin: auto;
display: flex;
flex-direction: row;
margin-left: 2%;
margin-right: 2%;
z-index: 5;
}
.header ul {
margin: 0;
padding: 0 2%;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 0.625rem 1.5rem;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
margin-left: auto; /* Neue Zeile hinzugefügt */
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
position: absolute; /* Geändert von 'float: right;' zu 'position: absolute;' */
right: 0; /* Hinzugefügt, um das Icon rechts auszurichten */
padding: 28px;
padding-left: 5%;
-webkit-user-select: none;
user-select: none;
z-index: 1000; /* Stellen Sie sicher, dass das Menü über anderen Elementen liegt */
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/* 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%;*/
z-index: 4;
}
/* 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%;
overflow: hidden; /* Verhindert, dass der Inhalt über den Container hinausgeht */
}
/* Erster Fußbereich-Stile */
.footer:first-child {
border-top: none;
}
/* Fußbereich-Stile */
.footer {
border-top: 1px solid;
padding: 20px;
height: 8vh;
display: flex;
align-items: center;
text-align: left;
font-size: 4vh;
background: #fff;
}
/* Media-Query-Stile */
/* 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%;
overflow: hidden;
}
}
/* Media Queries für Bildcontainer bei mindestens 1024px Breite */
@media(min-width: 1024px) {
#picture-container {
height: 85vh;
overflow: hidden;
}
.picture img {
width: 100%;
height: 100%;
object-fit: cover; /* Stellt sicher, dass das Bild den Container vollständig ausfüllt */
transition: transform 0.8s ease-in-out; /* Glatter Übergang beim Hovern */
}
.picture:hover img {
transform: scale(1.1); /* Vergrößert das Bild, ohne den Container zu vergrößern */
cursor: pointer; /* Ändert den Mauszeiger beim Hovern */
filter: brightness(60%);
transform-origin: center center; /* Zentriert den Zoom */
}
}<div class="site-wrapper">
<header class="header">
<a href="" class="logo">COMPANY</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">A</a></li>
<li><a href="#about">B</a></li>
<li><a href="#careers">C</a></li>
</ul>
</header>
<div id="picture-container">
<div class="picture">
<img class = "bau-picture" src="https://picsum.photos/200/300" alt="Bild ist nicht verfügbar">
<div class="footer"><h5>A</h5></div>
</div>
<div class="picture">
<img class = "bau-picture" src="https://picsum.photos/seed/picsum/200/300" alt="Bild ist nicht verfügbar">
<div class="footer">B</div>
</div>
</div>
</div>I tried different ways, like overflow:hidden etc. but nothing worked. Is the problem caused on my HTML structure. The footer should not be overlapped by the img. what can I do to solve this problem?
Yes if you can change your HTML you will easily fix the problem like this: buy adding a wrapping div on the image with class of .one and set this class with overflow:hidden (I did this only on image with footer B to compare). I also set the height to 10% for footer and 90% to the div with class '.one'. Pls see the snippet in full page