Сохраняйте фиксированное положение изображения всегда в центре области просмотра - PullRequest
Новая
       37

Сохраняйте фиксированное положение изображения всегда в центре области просмотра

0 голосов
/ 02 июля 2019

Я ищу способ сохранить мои изображения с фиксированным положением, которые размещаются на заднем плане страницы с помощью z-index, всегда в центре.

Сейчас они находятся в центре,но когда я начинаю прокручивать, они не перемещаются вниз по странице и, следовательно, больше не центрируются.

Я попытался установить контейнер изображения в фиксированное положение с верхним и левым 50%.Я также пытался использовать 50vh и 50vw, и проверил другие значения vh и vw. 

* { padding: 0; margin: 0; box-sizing: border-box; }

body {
  padding: 30px;
}

li.track {
  display: block;
  font-size: 5rem;
  margin-bottom: 15px;
}

li.track:hover {
  color: transparent;
  -webkit-text-stroke-color: #18181b;
  -webkit-text-stroke-width: 3px;
}

li.track:hover .album-art {
  display: block;
}

.album-art {
  z-index: -10;
  position: fixed;
  left: 47vw;
  top: 12vh;
  width: 90%;
  height: 50%;
  max-height: 450px;
  display: none;
  opacity: 0.5;
  overflow: hidden;
  transform: translateX(-50%);
}

.album-art img {
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}


<div class="tracks">

  <ol>
    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/michael-nau.jpg"></div>
        <p class="track-name">King Princess - 'Cheap Queen'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="hhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/louie-short.jpg"></div>
        <p class="track-name">Charly Bliss - 'Capacity'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/P4K-Tom-Waits-Jim-Jarmusch_PitchHeader.jpg"></div>
        <p class="track-name">Julia Jacklin - 'Good Guy'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="/img/kevin-abstract.png"></div>
        <p class="track-name">Kevin Abstract - 'Georgia'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="/img/okey-dokey.jpg"></div>
        <p class="track-name">Okey Dokey - 'Wag Your Tail'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
        <p class="track-name">Devendra Banhart - 'Kantori Ongaku'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="/img/michael-nau.jpg"></div>
        <p class="track-name">Michael Nau - 'Rides Through The Morning'</p>
      </a>
    </li>

    <li class="track">
      <a href="#" class="nav">
        <div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
        <p class="track-name">Hop Along - 'Prior Things'</p>
      </a>
    </li>

    <ol>
</div>

Я хочу, чтобы изображения, появляющиеся при наведении, всегда были в центре страницы (прокручиваетсяили нет).

1 Ответ

0 голосов
/ 02 июля 2019

попробуйте это css: 

body {
  padding: 30px;
}

li.track {
  display: block;
  font-size: 5rem;
  margin-bottom: 15px;
}

li.track:hover {
  color: transparent;
  -webkit-text-stroke-color: #18181b;
  -webkit-text-stroke-width: 3px;
}

li.track:hover .album-art {
  display: block;
}

.album-art {
  z-index: -10;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 50%;
  max-height: 450px;
  display: none;
  opacity: 0.5;
  overflow: hidden;
  transform: translate(-50%,-50%);
}

.album-art img {
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

спасибо

...