Question

我目前正在编写代码，尝试制作具有悬停效果的自适应图片库。在我创建的第一个代码中，效果很好。但是，它没有响应，因为它始终停留在4行中。请查看此Codepen 1

当我尝试使用style.css来更改flexbox的某些内容时，我能够使其响应并根据窗口大小来更改其大小。但是，无论何时将鼠标悬停到图像上，悬停框都不会与容器本身对齐。请查看此Codepen2

代码写在codepen本身上。我在第一个代码中更改为第二个代码的唯一代码是此代码（我注释了之前的代码，而不是删除它来记住我更改了哪个部分：

.container
{
    /*width: 1280px;
    margin: 70px auto 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    margin: .5vw;
    font-size: 0;
    display: -ms-flexbox;
    -ms-flexbox-wrap : wrap;
    -ms-flexbox-direction: column;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    display: -webkit-box;
    display: flex;
}
.container .box
{
    /*position: relative;
    width: 300px;
    height: 300px;
    background: #ff0;
    margin: 10px;
    box-sizing: border-box;
    display: inline-block;*/
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 300px;
    margin: .5vw;
}
.container .box .imgBox img
{
    /*max-width: 100%;*/
    width: 100%;
    height: auto; /*added this*/
    transition: transform 2s;
}

请帮我弄清楚为什么悬停位置不起作用。谢谢

Answer 1

您可以修改container的宽度，使其大小由relative positioning定义，这将解决您的问题。

唯一要做的更改是对带有类容器的div，如下所示。

.container {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

请检查以下示例。

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: sans-serif
}

.container {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.container .box {
  position: relative;
  width: 300px;
  height: 300px;
  background: #ff0;
  margin: 10px;
  box-sizing: border-box;
  display: inline-block;
}

.container .box .imgBox {
  position: relative;
  overflow: hidden;
}

.container .box .imgBox img {
  max-width: 100%;
  transition: transform 2s;
}

.container .box:hover .imgBox img {
  transform: scale(1.2);
}

.container .box .details {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, .8);
  transform: scaleY(0);
  transition: transform .5s;
}

.container .box:hover .details {
  transform: scaleY(1);
}

.container .box .details .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15p;
  color: #fff;
}

.container .box .details .content h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #ff0;
}

.container .box .details .content p {
  margin: 10px 0 0;
  padding: 0;
}

<div class="container">
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/1.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Snow Queen Elsa </h1>
        <p>Elsa is the daughter of Agnarr and Iduna, older sister of Anna, and queen of Arendelle. Elsa was born with the powers to manipulate ice and snow and used them to entertain her sister. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/2.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> The Little Mermaid Ariel </h1>
        <p>Ariel as she appears in her mermaid form in Disney's The Little Mermaid. Ariel is a fictional character and the title character of Walt Disney Pictures' 28th animated film The Little Mermaid (1989). She is often rebellious, and in the first film,
          she longs to be a part of the human world. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/3.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Sleeping Beauty Aurora </h1>
        <p>Princess Aurora, also known as Sleeping Beauty or Briar Rose, is a fictional character who appears in Walt Disney Pictures' animated feature film Sleeping Beauty (1959). Originally voiced by singer Mary Costa, Aurora is the only daughter of King
          Stefan and Queen Leah. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/4.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Aladdin's Jasmine </h1>
        <p>Princess Jasmine is the deuteragonist of Disney's 1992 animated feature film, Aladdin. She is from the Middle Eastern kingdom of Agrabah where her father, the Sultan, rules. Jasmine was born into a role and society that treats her as an object
          and a tool, rather than a person </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/5.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Rupunzel </h1>
        <p>Princess Rapunzel (voiced by Mandy Moore) is more assertive in character, and was born a princess. Her long blonde hair has magical healing and restoration powers. A woman named Mother Gothel (voiced by Donna Murphy) kidnaps Rapunzel for her magical
          hair which would help maintain her youth. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/5.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Megara </h1>
        <p>In Greek mythology, Megara was the oldest daughter of Creon, king of Thebes. Megara was offered by her father to Hercules because he defended Thebes. She had two children, a boy and a girl, but was killed with both of them by Hercules in excess
          of madness caused by Hera. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="c">
    </div>
    <div class="details">
      <div class="content">
        <h1> Belle The Beauty </h1>
        <p>Belle is a fictional character who appears in Walt Disney Pictures' animated feature film Beauty and the Beast (1991). Originally voiced by American actress and singer Paige O'Hara, Belle is the non-conforming daughter of an inventor who yearns
          to abandon her predictable village life in return for adventure. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/1.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Mulan The Great Warrior Of China </h1>
        <p>Mulan (full name Fa Mulan) is a character, inspired by an actual historic figure, who appears in Walt Disney Pictures' animated feature film Mulan (1998), as well as its sequel Mulan II (2004). </p>
      </div>
    </div>
  </div>
</div>

Answer 2

嗯。在position: relative;上尝试.box并学习一些CSS ...

HTML CSS悬停位置与容器不对齐

2 个答案: