Анимация не работает при наведении курсора мыши на изображение

#html #css #animation

#HTML #css #Анимация

Вопрос:

Я пытаюсь добавить развертку к правой анимации на моем изображении, чтобы при наведении курсора мыши изображение перемещалось вправо и также отображало текст при наведении курсора мыши. Я заставил это работать, просто найди с помощью кнопок, но я не понимаю, как это сделать. Это то, что у меня пока есть с моим кодом:

 .portfolio-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio-box img {
  width: 300px; /*changed this from 100% for the q*/
  height:auto;
  /*object-fit: contain;*/
}

.portfolio-mask {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background: #060606;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s ease-out;
}

.portfolio-mask:hover:after {
  transform: scaleX(1);
}

.portfolio-mask:hover {
  opacity: .85;
  color: white;
}  
 <div class="portfolio-box">
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
  <div class="portfolio-mask">
    <p class="portfolio-text">Design Mock up</p>
  </div>
</div>  

Ответ №1:

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

 .portfolio-box {
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 1;
}

.portfolio-box img {
    width: 300px; /*changed this from 100% for the q*/
    height:auto;
    transition: all 0.5s ease-out;
    display: block;
    /*object-fit: contain;*/
}

.portfolio-mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: #060606;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: all 0.5s ease-out;
}

.portfolio-box:hover .portfolio-mask {
    transform: scaleX(1);
    opacity: .85;
    color: white;
}
  

Изменения, которые я внес:

  1. Добавлено display: inline-block; для .portfolio-box — чтобы сделать его таким же большим, как изображение внутри.
  2. Добавлено display: block; для изображения, чтобы предотвратить пустое пространство размером 2-3 пикселя под изображением, когда оно отображается встроенным (по умолчанию).
  3. Добавлено transition: all 0.5s ease-out; для изображения, чтобы предотвратить перескакивание при изменении положения.
  4. Я изменил переход с transform на all , чтобы анимировать не только перемещение, но и непрозрачность контейнера маски.
  5. Анимация теперь добавляется при наведении курсора на .portfolio-box , потому что это статический контейнер, что очень важно для эффекта, которого вы хотите достичь — если вы добавите анимацию при наведении курсора мыши на изображение, вы получите бесконечную анимацию, потому что при наведении курсора мыши на изображение оно сдвинется вправо, после чего оно больше не будет наведено, поэтому оно вернется в исходное состояние, а затем оно снова будет наведено, поэтому оно пойдет вправо … повторите инициализацию 😉

Комментарии:

1. У меня есть несколько вопросов. При наведении курсора мыши на изображение я все еще хочу видеть изменение непрозрачности, чтобы вы все еще могли видеть картинку, а предоставленный вами код не позволяет это сделать. Почему это не сработало бы для добавления анимации в класс .portfolio-mask?

2. Изменение непрозрачности изображения или маски? Вы хотите сдвинуть изображение вправо и все еще видеть его? Я не понимаю. В portfolio-mask классе есть анимации, но наведение выполняется на его контейнер, потому что в начале маска находится за пределами контейнера, поэтому вы не можете навести на нее курсор мыши.

3. Позвольте мне связать кое-что, чтобы показать вам, что я имею в виду и к чему стремлюсь. Ваш код действительно близок к тому, что мне нужно, но, возможно, эта ссылка покажет вам, к чему я стремлюсь. Прокрутите вниз до раздела портфолио и наведите курсор на изображения, и вы поймете, что я имею в виду. Единственное отличие в том, что я хочу, чтобы моя анимация смещалась вправо. Вот ссылка: preview.themeforest.net/item/royme-portfolio-template / …

4. Хорошо, итак, я просто удалил анимацию для изображения, теперь она останется под маской 🙂

5. Большое спасибо, чувак! Действительно ценю это, как я уже сказал, у меня не было проблем с этим, когда дело доходит до кнопок, потому что я бы нацелился на один класс. Последний вопрос, если вы не возражаете. Является ли то, как я структурировал свой HTML для этого, хорошим способом добиться этого или есть более чистый способ сделать это?

Ответ №2:

Из вашего описания я думаю, что то, что вы пытаетесь сделать, является transform . Для этого просто добавьте translateX преобразование (желаемого размера) в css.

Надеюсь, это поможет.

 .portfolio-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio-box img {
  width: 300px; /*changed this from 100% for the q*/
  height:auto;
  /*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
  transform: translateX(5em);
}
.portfolio-mask {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background: #060606;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s ease-out;
}

.portfolio-mask:hover:after {
  transform: scaleX(1);
}

.portfolio-mask:hover {
  opacity: .85;
  color: white;
}  
 <div class="portfolio-box">
  <img class="animate"  src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
  <div class="portfolio-mask">
    <p class="portfolio-text">Design Mock up</p>
  </div>
</div>  

Комментарии:

1. StackOverflow не поддерживает SCSS во фрагментах, вам больше повезло бы протестировать «развертку вправо» / преобразование с текстом в вашем собственном коде или в codepen..

2. Я пытаюсь добиться чего-то подобного, но в моем случае я использую изображение: codepen.io/Jtwa/pen/vNmaYw

3. @DanielD css, приведенный в этом codepen, будет работать и для изображения. Я не понял, что это было то, что вам было нужно.

4. Извините за путаницу, но я хочу, чтобы тот же эффект при наведении курсора на изображение, а не само изображение перемещалось.

5. @DanielD codepen.io/anon/pen/xexWeL то же, что и в вашем codepen, но с изображением в div