造成放大效果，但悬停时不会同时放大图像和重叠页脚

问题描述 投票：0回答：1

当我将鼠标悬停在相应的 img 上时，我想在不同时放大 img 和重叠页脚的情况下产生放大效果。

<body>
  <div class="site-wrapper">
    <header class="header">
      <a href="" class="logo">COMPAN<<</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://allgemeinebauzeitung.de/media/_processed_/c/5/csm_peri-geruestbau-geruestbautechnik-naechste-generation-im-geruestbau-vereint-vorteile-von-rahmen-und-modul-45646-1_acfa19c3af.jpg" alt="Bild ist nicht verfügbar"> 
            <div class="footer"><h5>A</h5></div>
          </div>
          <div class="picture">
            <img class = "bau-picture" src="https://www.betriebsratspraxis24.de/wp-content/uploads/sites/52/2023/01/AdobeStock_283383067-1024x683.jpeg" alt="Bild ist nicht verfügbar">
            <div class="footer">B</div>
          </div>
        </div>
  </div>
</body>

/* 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 */
}
}

我尝试了不同的方法，例如溢出：隐藏等，但没有任何效果。问题是由我的 HTML 结构引起的吗？页脚不应与 img 重叠。我该怎么做才能解决这个问题？

html css image footer overlap
1个回答
0
投票

是的，如果你可以更改你的 HTML，你将很容易解决这样的问题：购买在 .one 类的图像上添加一个包装 div 并将该类设置为溢出：隐藏（我只在带有页脚 B 的图像上执行此操作以进行比较）。我还将页脚的高度设置为 10%，将类为 '.one' 的 div 的高度设置为 90%。

/* 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: 10%;  /* I set it to 10%*/
  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 */
  /* height: auto; */
  cursor: pointer; /* Ändert den Mauszeiger beim Hovern */
  filter: brightness(60%);
  transform-origin: center center; /* Zentriert den Zoom */
}
}

.one{
  height: 90%; 
  width: 100%;
  overflow: hidden;
}

.beau-picture{
  height: 100%;
}
<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">
            <div class="one">  <!--this is the image wrapping div with overflow hidden-->
                <img class = "bau-picture" src="https://picsum.photos/seed/picsum/200/300" alt="Bild ist nicht verfügbar">
            </div>
            <div class="footer">B</div>
        </div>
    </div>
</div>

）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.