Блог

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

 .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>  

Я внес некоторые изменения в ваш 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 , потому что это статический контейнер, что очень важно для эффекта, которого вы хотите достичь — если вы добавите анимацию при наведении курсора мыши на изображение, вы получите бесконечную анимацию, потому что при наведении курсора мыши на изображение оно сдвинется вправо, после чего оно больше не будет наведено, поэтому оно вернется в исходное состояние, а затем оно снова будет наведено, поэтому оно пойдет вправо … повторите инициализацию 😉

Из вашего описания я думаю, что то, что вы пытаетесь сделать, является 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>