Question

我有一张简单的卡片，其中包含一张图像.menu-card__header-image。悬停时，我希望将该图像提升几个像素。但是，当我提起图像时，在父容器.menu-card外部看不到图像。

.menu-card {
  font-family: sans-serif;
  color: red;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-bottom: 20px;
  max-width: 400px;
}
.menu-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  overflow: visible;
}
.menu-card__header {
  background-color: orange;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  max-height: 300px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  text-align: center;
}
.menu-card__header-image {
  margin-left: auto;
  margin-right: auto;
  z-index: 33;
  position: relative;
  bottom: 0px;
  transition: bottom 0.5s ease-in-out;
}
.menu-card:hover .menu-card__header-image {
  bottom: 80px;
}
.menu-card:first-child {
  margin-bottom: 50px;
}
.menu-card:last-child {
  margin-top: 50px;
}
.menu-card__title {
  padding: 0 12px;
}
.menu-card__description {
  padding: 0 12px;
}

.menu-card__title {
  text-align: center;
}

<div class="menu-card">
  <div class="menu-card__header">
    <img src="http://lorempixel.com/250/635" alt="" class="menu-card__header-image" height="400px" />
  </div>
  <h2 class="menu-card__title">
    Lorem Ipsum
  </h2>
  <p class="menu-card__description">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, architecto. Repudiandae dolorum incidunt sint ex
  </p>
</div>

以下是相关的笔：https://codepen.io/saifalfalah/pen/gJKNBE?editors=1100

如何在悬停时使图像在父容器外部可见而不更改标记（最好）？

Answer 1

有三个原因可导致您的图像在抬起时不可见。

您在.menu卡上有overflow:hidden
您在.menu-card__header上有overflow:hidden
您在.menu-card__header上设置了clip-path

您可以使用剪切路径或CSS三角形，使用位于标题底部的白色元素来获得角度效果。这将消除对标题剪辑路径的需要。然后删除溢出的CSS，您应该会得到想要的效果。

Answer 2

不更改标记的一个选项是对clip-path属性进行动画，也可以在悬停时将其更改为clip-path: polygon(0 -80px, 100% -80px, 100% calc(100% - 6vw), 0 100%)-请参见下面的演示

body {
  margin-top: 100px; /* for illustration */
}

.menu-card {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  /*overflow: hidden;*/
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-bottom: 20px;
  max-width: 400px;
}
.menu-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  /*overflow: visible;*/
}
.menu-card:hover .menu-card__header { /* added */
   clip-path: polygon(0 -80px, 100% -80px, 100% calc(100% - 6vw), 0 100%);
}
.menu-card__header {
  background-color: orange;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  max-height: 300px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  /*overflow: hidden;*/
  text-align: center;
  transition: clip-path 0.5s ease-in-out; /* added */
}
.menu-card__header-image {
  margin-left: auto;
  margin-right: auto;
  z-index: 33;
  position: relative;
  bottom: 0px;
  transition: bottom 0.5s ease-in-out;
}
.menu-card:hover .menu-card__header-image {
  bottom: 80px;
}
.menu-card__title {
  padding: 0 12px;
}
.menu-card__description {
  padding: 0 12px;
}

.menu-card__title {
  text-align: center;
}

<div class="menu-card">
  <div class="menu-card__header">
    <img src="http://lorempixel.com/250/635" alt="" class="menu-card__header-image" height="400px" />
  </div>
  <h2 class="menu-card__title">
    Lorem Ipsum
  </h2>
  <p class="menu-card__description">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, architecto. Repudiandae dolorum incidunt sint ex
  </p>
</div>

Answer 3

我将以不同的方式执行此操作，而不是clip-path，我会考虑在标题部分使用背景来创建有角度的形状，而您的图像只会被隐藏在后面。然后，您只需进行简单的变换动画，就不会出现溢出问题。

在以下示例中，我将6vw替换为40px：

.menu-card {
  font-family: sans-serif;
  color: red;
  margin:40px auto;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius:0 0 5px 5px;
  max-width: 400px;
}
.menu-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.menu-card__header {
  background-color: orange;
  max-height: 300px;
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.menu-card__header-image {
  transition: transform 0.5s ease-in-out;
}
.menu-card:hover .menu-card__header-image {
  transform:translateY(-80px);
}
.menu-card__title {
  margin:0;
  padding:15px;
  padding-top:40px; /* space for the triangle shape */
  margin-top:-40px; /* to create the overlap with the top section (same as padding)*/
  background:
    /* top background will take 40px and draw a triangular shape*/
    linear-gradient(to bottom right,transparent 49%,#fff 50%)top/100% 40px,
    /* bottom background will take the remaining space as a rectangular shape*/
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 40px);
  background-repeat:no-repeat;
  position:relative;
  text-align: center;
}
.menu-card__description {
  margin:0;
  padding: 0 12px 20px;
  background:#fff;
  position:relative;
}

<div class="menu-card">
  <div class="menu-card__header">
    <img src="https://picsum.photos/id/0/250/635" alt="" class="menu-card__header-image" height="400px" />
  </div>
  <h2 class="menu-card__title">
    Lorem Ipsum
  </h2>
  <p class="menu-card__description">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, architecto. Repudiandae dolorum incidunt sint ex
  </p>
</div>

Answer 4

只需更改两种样式校正即可。

1，从“ .menu-card__header”中删除溢出属性

.menu-card__header { /* overflow: hidden; */}

2，在悬停时添加以下属性

&:hover  .menu-card__header {
clip-path: polygon(0 -80px, 100% -80px, 100% calc(100% - 6vw), 0 100%);

}

请参见下面的jsfiddle示例 here

在父元素之外溢出子元素

4 个答案: