Изменить фоновое изображение на ссылку на чистый CSS

Question

Я пытаюсь получить этот эффект на моем сайте.пример: https://rno1.com/

(прокрутите вниз до «мы специализируемся на»)

Я очень новичок в HTML и CSS, а также работаю над WordPress, который делает его немного сложнее.начал кодировать с этим вопросом здесь, в StackOverflow:

Изменить фоновое изображение тела при наведении на чистый HTML / CSS

, но я хотел добавить переход между изображениями подкачкиКроме того, где мне нужно изменить атрибуты шрифта?

div.link>a {
  displya: inline-block !important;
  position: relative !important;
  z-index: 100;
}

.bg1:hover+.background {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}

.bg2:hover+.background {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}

.background {
  background: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class=container>
  <div class="link">
    <a href="#" class="bg1">bg1</a>
    <div class=background></div>
    <a href="#" class="bg2">bg2</a>
    <div class=background>
    </div>
  </div>
</div>

Answer 1

Вы можете добавить переход непрозрачности, как показано ниже:

div.link>a {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.bg1+.background {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover +.background {
  opacity:1;
}

.bg2+.background {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover +.background {
  opacity:1;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition:1s all;
  opacity:0;
}

<div class=container>
  <div class="link">
    <a href="#" class="bg1">bg1</a>
    <div class=background></div>
    <a href="#" class="bg2">bg2</a>
    <div class=background>
    </div>
  </div>
</div>

Вы также можете оптимизировать свой код, как показано ниже:

div.link>a {
  display: inline-block;
}

.bg1:before {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover:before {
  opacity:1;
}

.bg2:before {
  background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover:before {
  opacity:1;
}

.bg:before {
  content:"";
  position: fixed;
  z-index:-1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition:1s all;
  opacity:0;
}

<div class=container>
  <div class="link">
    <a href="#" class="bg1 bg">bg1</a>
    <a href="#" class="bg2 bg">bg2</a>
  </div>
</div>