Как это верстается

Question

Проблема с версткой.

Вообщем есть такая вот секция: Три блока с картинками сделал с помощью flex, а вот как сделать, чтобы снизу еще всегда был общий такой блок. Его ширина должна быть равна ширене блока контейнер.

Мое решение очень костыльное которое работает если экран больше ширины контейнера и выглядит таким образом:

a {
	 color: #fff;
	 text-decoration: none;
}
 .featured-work .project-works {
	 margin-top: 60px;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-flow: row wrap;
}
 .featured-work .project-works .project-works__item {
	 position: relative;
	 height: 319px;
	 overflow: hidden;
}
 .featured-work .project-works .project-works__item .wrapper {
	 position: absolute;
	 top: 0;
	 left: 0;
	 background-color: rgba(0, 0, 0, 0.7);
	 height: 100%;
	 width: 100%;
	 transition: ease-in-out 0.2s;
}
 .featured-work .project-works .project-works__item .wrapper-title {
	 color: #fff;
	 text-transform: uppercase;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}
 .featured-work .project-works .project-works__item .wrapper:hover, .featured-work .project-works .project-works__item .wrapper.-title {
	 background-color: rgba(0, 0, 0, 0);
	 opacity: 0;
	 flex-grow: 3;
}
 .featured-work .project-works .fold-footer {
	 height: 110px;
	 width: 1008px;
}
 .featured-work .project-works .fold-footer .wrapper {
	 background-image: url(https://picsum.photos/id/29//1008);
	 height: 100%;
}
 .featured-work .project-works .fold-footer .wrapper .container {
	 padding: 0 50px;
	 display: flex;
	 height: 100%;
	 justify-content: space-between;
	 align-items: center;
	 color: #fff;
}
 .featured-work .project-works .fold-footer .wrapper .container .submit-now {
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 padding: 10px;
	 border: 1px solid;
}

<section class="featured-work">
  <div class="project-works">
    <div class="project-works__item">
      <img src="https://picsum.photos/id/24/336/320">
      <div class="wrapper">
        <div class="wrapper-title">
          Making
        </div>
      </div>
    </div>
    <div class="project-works__item">
      <img src="https://picsum.photos/id/25/336/320">
      <div class="wrapper">
        <div class="wrapper-title">
          Vintage
        </div>
      </div>
    </div>
    <div class="project-works__item">
      <img src="https://picsum.photos/id/26/336/320">
      <div class="wrapper">
        <div class="wrapper-title">
          Branding
        </div>
      </div>
    </div>

    <div class="fold-footer">
      <div class="wrapper">
        <div class="container">
          <div class="description">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
          </div>
          <div class="submit-now">
            <a href="">Submit Now</a>
          </div>
        </div>
      </div>
    </div>

И как я понимаю, в макете при наведение сам блок расширяется, пытался реализовать, через flex-basis, flex-grow, ничего не изменялось..

Answer 1

Вот, только SCSS тут не работает. Скопируйте в codepen отсюда.

a {
  color: #fff;
  text-decoration: none;
}
.featured-work {
  .project-works {
    margin-top: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    margin: 0 auto;
    .project-works__item {
      position: relative;
      height: 319px;
      overflow: hidden;
      flex-grow: 1;
      
      &:hover{
        flex-grow: 4;
      }
      
      .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        height: 100%;
        width: 100%;
        transition: ease-in-out 0.2s;
        &-title {
          color: #fff;
          text-transform: uppercase;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: (translate(-50%, -50%));
        }

        &:hover,
        &.-title {
          background-color: rgba(0, 0, 0, 0);
          opacity: 0;
          flex-grow: 3;
        }
      }
    }
    .fold-footer {
      height: 110px;
      width: 100%;
      
      .wrapper {
        background-image: url(https://picsum.photos/id/29//1008);
        height: 100%;
        .container {
          padding: 0 50px;
          display: flex;
          height: 100%;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          .submit-now {
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 10px;
            border: 1px solid;
          }
        }
      }
    }
  }
}

  <section class="featured-work">
    <div class="project-works">
      <div class="project-works__item">
        <img src="https://picsum.photos/id/24/336/320">
        <div class="wrapper">
          <div class="wrapper-title">
            Making
          </div>
        </div>
      </div>
      <div class="project-works__item">
        <img src="https://picsum.photos/id/25/336/320">
        <div class="wrapper">
          <div class="wrapper-title">
            Vintage
          </div>
        </div>
      </div>
      <div class="project-works__item">
        <img src="https://picsum.photos/id/26/336/320">
        <div class="wrapper">
          <div class="wrapper-title">
            Branding
          </div>
        </div>
      </div>

      <div class="fold-footer">
        <div class="wrapper">
          <div class="container">
            <div class="description">
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
            </div>
            <div class="submit-now">
              <a href="">Submit Now</a>
            </div>
          </div>
        </div>
      </div>
</div>
</section>

Answer 2

:root {
  --time: 0.35s linear;
}

Это переменная time, я ёё использую для плавности анимации изменения карточки, чтобы заново не прописывать элементам карточки скорость анимации, если придётся менять

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --time: 0.35s linear;
}

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 20px;
  color: white;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 5px;
}

.flex__wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.card {
  position: relative;
  min-height: 200px;
  flex: 1;
  background: url(https://picsum.photos/600/300) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  transition: flex var(--time);
  z-index: 2;
}

.card:nth-child(2) {
  background-image: url(https://picsum.photos/600/400);
}

.card:nth-child(3) {
  background-image: url(https://picsum.photos/600/500);
}

.card__text {
  -webkit-user-select: none;
  -moz-user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: opacity var(--time);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.card__text::before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: black;
  z-index: -1;
}

.card__text span {
  opacity: 0.8
}

.card:hover {
  cursor: pointer;
  flex: 2;
}

.card:hover .card__text {
  opacity: 0;
}

.footer__content {
  padding: 5% 4%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  background: linear-gradient(rgba(29, 168, 139, 0.85), rgba(29, 168, 139, 0.85)), url(https://picsum.photos/1000/200);
  -webkit-background-size: cover;
  background-size: cover;
  justify-content: space-between;
  align-items: center;
}

.footer__content-text {
  max-width: 80%;
}

.button {
  white-space: nowrap;
  border: 2px solid white;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: color .2s linear, background-color .2s linear;
}

.button:hover {
  background-color: white;
  color: black;
}

<div class="container">
  <div class="content">
    <div class="flex__wrapper">
      <div class="card">
        <div class="card__text">
          <span>Vintage</span>
        </div>
      </div>
      <div class="card">
        <div class="card__text">
          <span>Branding</span>
        </div>
      </div>
      <div class="card">
        <div class="card__text">
          <span>Support</span>
        </div>
      </div>
    </div>
  </div>
  <div class="footer__content">
    <div class="footer__content-text">
      Lorem ipsum dolor sit amet, <b>consectetur adipisicing</b> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <div class="button">Submit Now</div>
  </div>
</div>

БЛОГ НА HUSL

Как это верстается

Ответы (2 шт):