Эффект наведения на два изображения css

#html #css #image #hover #transition

#HTML #css #изображение #наведение #переход

Вопрос:

У меня есть два изображения одно поверх другого, и при наведении на него курсора мыши переход выглядит аккуратно.

Однако у меня проблема: я не могу прикрепить свое изображение к моей пунктирной рамке, которую я создал (см. Мою Скрипку)…

Если вы можете взглянуть на мою скрипку, это объяснило бы мои плохие формулировки…

Как вы можете видеть в моем примере, я бы хотел, чтобы мой монитор мог оставаться внутри моего пунктирного поля. В настоящее время при прокрутке вниз / или вверх монитор выходит из него (под ним ..)

Возможно ли вообще использовать чистый css без фиксации фоновой позиции? если нет, то с чем?

Любая помощь будет оценена.

 body {
  height: 1000px;
}

.w {
  border: dotted;
  margin: 0 auto;
  white-space: nowrap;
  max-width: 261px;
  width: 100%;
  height: 212px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=cropamp;fm=jpgamp;h=1080amp;q=75amp;w=1920") repeat fixed;
  background-position: 50% 100%;
  background-repeat: none;
  background-size: cover;
  z-index: 5;
  font-size: 0;
}

.i {
  width: 40px;
  height: 100%;
  display: inline-block;
  position: relative;
  z-index: 4;
  padding: 2px;
  transition: all 5.3s ease-in-out;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=cropamp;fm=jpgamp;h=1080amp;q=75amp;w=1920") repeat fixed;
  background-size: cover;
  background-repeat: none;
  background-position: 50% 100%;
  border-radius: 0%;
}

.i:hover {
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
  opacity: 0;
}

 <body>
  <div class="w">
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
  </div>
</body>

1. Привет! Добро пожаловать в Stack Overflow! Чтобы получить более быстрый ответ, может помочь включить изображение достигнутого эффекта, а также поместить ваши примеры кода прямо в сообщение, используя инструменты, доступные SO для этого. Удачи!

2. Я добавил ваш код в измененный пост

Ответ №1:

Вот идея использования псевдоэлемента и пути клипа:

 .w {
  border: dotted;
  margin: 0 auto;
  width: 264px;
  height: 200px;
  position: relative;
  display: flex;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=cropamp;fm=jpgamp;h=1080amp;q=75amp;w=1920") 
    top/auto 150% no-repeat; /* this should be the same as */
}

.i {
  width: 100%;
  clip-path: inset(0);
}

.i::before {
  content: "";
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=cropamp;fm=jpgamp;h=1080amp;q=75amp;w=1920") 
    top/auto 150% no-repeat; /* this! */
  transition: all 5.3s ease-in-out;
}

.i:hover::before {
  opacity: 0;
  transition: all 0s ease-in-out;
}

 <div class="w">
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
</div>