Изменение фоновых изображений при наведении

Скриншоты здесь

Я пытаюсь анимировать наведение для полноэкранного фонового изображения с помощью CSS. (Скриншоты 1 и 2), но я также хочу, чтобы моя навигация использовала стили стилей моего списка вместо навигации, которую я использовал из этого урока. (Скриншоты 3 и 4). Как я могу заставить классы функционировать как соседний брат парящих изображений вместо якоря?

Вот мой CSS

html { 
background: url(scarf6.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

.container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}

.container img {
  position: absolute;
  top: 0%;
  left:0%;
  z-index: -60;
  height:100%;
}

.container li img {
  position: absolute;
  top: 0%;
  left: 100%;
  height:100%;
  z-index: -50;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

ul {
  list-style: none;
}

nav {
    top:0%;
    right:0%;
    left:100%;
    height:100%; 
    width:30px; 
    z-index: 1;
    display: block;
}

li a:hover + img {
  left: 0px;
}

.red {
    background: #FF9999;
}

.white {
    background:#FAF0E6;
}

.pink {
    background: #FFC0CB;
}

.fuscia {
    background:#FF0033;
}

.l1 {
    height:4%;
    width:100%;
}

.l2 {
    height:.7%;
    width:100%;
}

.l3 {
    height:1.3%;
    width:100%;
}

.l4 {
    height:.7%;
    width:100%;
}

.l5 {
    height:1.3%;
    width:100%;
}

.l6 {
    height:.7%;
    width:100%;
}

.l7 {
    height:2.7%;
    width:100%;
}

.l8 {
    height:3.3%;
    width:100%;
}

.l9 {
    height:5.4%;
    width:100%;
}

.l10 {
    height:1.7%;
    width:100%;
}

.l11 {
    height:6.7%;
    width:100%;
}

.l12 {
    height:.8%;
    width:100%;
}

.l13 {
    height:4.2%;
    width:100%;
}

.l14 {
    height:5%;
    width:100%;
}

.l15 {
    height:5.8%;
    width:100%;
}

.l16 {
    height:3.3%;
    width:100%;
}

.l17 {
    height:2.5%;
    width:100%;
}

.l18 {
    height:1.1%;
    width:100%;
}

.l19 {
    height:34.5%;
    width:100%;
}

.l20 {
    height:3.1%;
    width:100%;
}

.l21 {
    height:5%;
    width:100%;
}

.l22 {
    height:6.2%;
    width:100%;
}

И мой HTML

    <body>
<div class="container">
<div class="overlay">
<nav>
    <li class="l1 pink">
        <a href="#">Home</a>
        <img src="../../Cover.png" alt="">
    </li>
    <li>
        <a href="#">About</a>
        <img class="hidden">
    </li>
    <li>
        <a href="#">Clients</a>
        <img class="hidden">
    </li>
    <li>
        <a href="#">Work</a>
        <img class="hidden">
    </li>
    <li>
        <a href="#">Contact</a>
        <img class="hidden">
    </li>
    </nav>
    </div>
    </div>
</body>

Спасибо за помощь!

Источник

1 ответ

Решение

Поместите изображение как фоновое изображение li или a. Если вы не хотите отображать изображение, поместите его с помощью background-position в какую-то непроходимую область - например, если изображение высотой 32px, поместите его:

background-position: left 32px;

Это сделает этот образ каким-то невидимым. (Важное примечание: лучше, чтобы этот элемент с этим фоном был как display: block). Затем при наведении вы поместите изображение обратно:

...:hover {
  background-position: left top;
}

Я использую это во многих случаях. Также при переключении двух изображений - фактически, они оба находятся в одном изображении и только перемещаются в фоновом режиме при наведении.

Источник
Другие вопросы по тегам