CSS - только увеличение фона (без наложения текста) - PullRequest
Новая
       15

CSS - только увеличение фона (без наложения текста)

0 голосов
/ 11 сентября 2018

Я пытаюсь сделать эффект увеличения фонового изображения. Код ниже представляет один кликабельный элемент с фоном изображения. У меня проблема в том, что он увеличивает все в этом div, включая дочерние div. Я бы просто хотел, чтобы фоновое изображение увеличилось (оставив наложенный текст без изменений) 

<a class="outer-tile tile-text" href="#">
    <div class="inner-tile d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')">
      <div class="mb-auto p-2">
        <span class="b-dark p-1">MyTag</span>
      </div>
      <div class="b-dark w-100 p-2">
        <h3>My Title</h3>
        <p>This is the content</p>
      </div>
    </div>
  </a>


.outer-tile {
    overflow: hidden;
    height: 400px;
}

.inner-tile {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.inner-tile:hover {
    transform: scale(1.2);
}

Вот кодекс :

Как бы сделать только фон для увеличения без увеличения текста?

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете поместить фоновое изображение на элемент, который является родственным элементам текста, а не родительским элементом.Затем используйте позиционирование и z-index, чтобы поместить его позади них: 

.outer-tile {
    overflow: hidden;
    height: 400px;
  position:relative;
}

.tile-underlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
}

.outer-tile:hover .tile-underlay {
    transform: scale(1.2);
}

  <a class="outer-tile tile-text" href="#">
      <div class="tile-underlay d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')"></div>
      <div class="mb-auto p-2">
        <span class="b-dark p-1">MyTag</span>
      </div>
      <div class="b-dark w-100 p-2">
        <h3>My Title</h3>
        <p>This is the content</p>
      </div>

  </a>

https://codepen.io/anon/pen/NLyYKY

...