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

Question

Я пытаюсь создать макет, подобный следующему: 1

Я пытался реализовать карты продукта с помощью flexbox (я сделал это 2 )

.product-container {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:5px;
    overflow-y:scroll;
    height:500px;
}

.product-container article {
    flex-basis:200px;
    height:200px;
    margin:5px;
    margin-bottom:30px;
    border-radius: 40px 40px 40px 40px;
    -moz-border-radius: 40px 40px 40px 40px;
    -webkit-border-radius: 40px 40px 40px 40px;
    border: 0px solid #000000;
    -webkit-box-shadow: 0px 0px 19px 0px rgba(166,159,166,1);
    -moz-box-shadow: 0px 0px 19px 0px rgba(166,159,166,1);
    box-shadow: 0px 0px 19px 0px rgba(166,159,166,1);
    position:relative;
}



.product-container article :nth-child(1) {
    position:absolute;
    top:30px;
    left:25px;
}

.product-container article :nth-child(2) {
    position:absolute;
    top:30px;
    right:25px;
}

.product-container article :nth-child(1), .product-container article :nth-child(2) {
    color:#7a797f;
    font-weight: 700;
    font-size:1rem;
}

.product-container div {
    width:60%;
    height:60%;
    position:absolute;
    bottom:30px;
    right:44px;
    left:44px;
    background-image: url('https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg');
    background-size: cover;
}

.active {
    background-color:#f4c60e;
    display:block;
    height:2000px;
    
    
    
}

.active div {
    background-image:url('https://lh3.googleusercontent.com/proxy/5z8OzJ5Ft67duR1ioL9c7yLYl7f5BHIeuohBxCT2qL9E7Ee1Z9f-F2WKitW9pAG75k7fvM5NAc3WRn-Z3GiDTdUyN2M1CD_hmqiBeg');
    background-size: cover;
}

<div class="product-container">
                    <article class="active">
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article class="no-margin">
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article class="no-margin">
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article class="no-margin">
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article>
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                    <article class="no-margin">
                        <span>Strawberry</span>
                        <span>$2.99</span>
                        <div></div>
                    </article>
                </div>

, но у меня проблема с созданием желтой карточки. Есть ли способ сделать элемент Flex выше и перекрывать другие элементы Flex при наведении? Я попытался использовать flex-grow, но это приведет к горизонтальному росту карты и к sh другим картам вправо

. Есть ли лучший способ создать такую ​​раскладку?

Answer 1

flex-direction: column предлагает упаковывать гибкие элементы в пустые пространства ширины контейнера, но с применением height для гибкого контейнера, чтобы красиво обернуть упакованные элементы.

Это пример , но это не так отклик https://codepen.io/DohaHelmy/pen/GRJJXEN

для решения проблемы с высотой лучше использовать javascript для манипулирования различными размерами

Answer 2

, как прокомментировано, grid - это опция для основного макета, поэтому элемент может проходить через несколько строк или столбцов, дополнительный минус margin может вытащить его наружу или навести следующий ряд

пример, охватывающий 2 строки:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 180px));
  grid-gap: 2em;
  padding:1em;
  justify-content: center;
  background:#ddd
}
.item {
  border: solid;
  border-radius: 0.5em;
  box-shadow: 0 0 15px;
  margin:0;
  padding:0;
  display:flex;
  flex-flow:column;
}
.item figcaption {
  margin:0;
  padding: 0.5em;
  text-align-last: justify;
}
.item span {
  display: inline-block;
  text-align: left;
}
.item img {
  max-width: 80%;
  display: block;
  margin: auto;
  mix-blend-mode:multiply
}
.item form {display:none;}
.item form {
  margin:1em;
  text-align:center;
}
.item form [type="number"]{ width:3rem}
.item:hover , .item.active{
  grid-row: span 2;
  background: yellow;
  margin-bottom: -50px;
  position: relative;
}
.item:hover form , .item.active form{
  display:block;
}

<section class="grid">
 <figure class="item">
    <figcaption><span>Item's name</span> <span>Price </span></figcaption>
    <img
      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">
    <form><input type="number" 
       min="1"  value="1" > <input type="submit"></form>
  </figure>
  
 <figure class="item">
    <figcaption><span>Item's name</span> <span>Price </span></figcaption>
    <img
      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">
    <form><input type="number" 
       min="1"  value="1" > <input type="submit"></form>
  </figure>
  
 <figure class="item">
    <figcaption><span>Item's name</span> <span>Price </span></figcaption>
    <img
      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">
    <form><input type="number" 
       min="1"  value="1" > <input type="submit"></form>
  </figure>
  
 <figure class="item">
    <figcaption><span>Item's name</span> <span>Price </span></figcaption>
    <img
      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">
    <form><input type="number" 
       min="1"  value="1" > <input type="submit"></form>
  </figure>
  
 <figure class="item">
    <figcaption><span>Item's name</span> <span>Price </span></figcaption>
    <img
      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">
    <form><input type="number" 
       min="1"  value="1" > <input type="submit"></form>
  </figure>
  
</section>

ресурсы о сетке: https://css-tricks.com/snippets/css/complete-guide-grid/, https://gridbyexample.com/