Переполнение дочернего элемента вне родительского элемента - PullRequest
Новая
       9

Переполнение дочернего элемента вне родительского элемента

1 голос
/ 28 мая 2019

У меня есть простая карточка с изображением .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

Как сделать так, чтобы изображение отображалось за пределами родительского контейнера при наведении курсора без изменения разметки (желательно)?

Ответы [ 4 ]

1 голос
/ 28 мая 2019

Один из вариантов без изменения разметки - animate , свойство 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>
1 голос
/ 28 мая 2019

Существует три причины, по которым ваше изображение не видно при поднятии.

  • у вас есть overflow:hidden на .menu-карточке
  • у вас есть overflow:hidden на .menu-card__header
  • у вас установлен clip-path на .menu-card__header

Вы можете получить угловой эффект, используя белый элемент, расположенный в нижней части заголовка, используя путь клипа илиCSS треугольник.Это сведет на нет необходимость в пути клипа заголовка.Затем удалите css переполнения, и вы получите желаемый эффект.

0 голосов
/ 28 мая 2019

Нужно просто изменить две коррекции на стили.

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 здесь

0 голосов
/ 28 мая 2019

Я бы сделал это иначе, вместо 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...