/* Контейнер для изображений */
.grope {
}

/* Первое изображение (нижнее, по умолчанию видимое) */
.grope .bottom {
  display: block; /* показываем по умолчанию */
  width: 100%;
  height: auto;
  position: relative; /* по желанию */
  transition: opacity 0.0s ease;
}

/* Второе изображение (верхнее, по умолчанию невидимое) */
.grope .top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0; /* невидимое по умолчанию */
  transition: opacity 0.0s ease;
  pointer-events: none; /* чтобы не мешать наведению */
}

/* При наведении на контейнер делаем невидимой нижнее изображение и видимым верхнее */
@media screen and (min-width: 1025px) {
  /* Ваши стили для компьютеров */
.grope:hover .bottom {
  opacity: 0;
}

.grope:hover .top {
  opacity: 1;
}

}


img {
  -webkit-user-drag: none;
  user-drag: none;
}