Как сделать такой hover эффект при наведении на изображение?

307

24 сентября 2021, 08:30

Ребята как сделать такой hover эффект при наведение мыши?

Я реализовал данный эффект через JS все работает, но мне кажется это не правильно. Я думаю, код не должен быть таким громоздким.

Есть еще другие способы на чистом JS? где бы код так много не повторялся.

  let projectLatest = document.querySelectorAll('.latest-project img'),
    projectInfo = document.querySelectorAll('.project-info'),
    hoverLink = document.querySelectorAll('.fa-link'),
    zoomIcon = document.querySelectorAll('.fa-search');
for (let i = 0; i < projectLatest.length; i++) {
    projectLatest[i].addEventListener('mouseover', () => {
        projectLatest[i].style.transition = '0.5s';
        projectLatest[i].style.opacity = '0.5';
        projectInfo[i].style.background = '#362f2d';
        hoverLink[i].style.display = 'block';
        zoomIcon[i].style.display = 'block';
    });
    projectLatest[i].addEventListener('mouseout', () => {
        projectLatest[i].style.transition = '0.5s';
        projectLatest[i].style.opacity = '1';
        projectInfo[i].style.background = '#fbfaf8';
        hoverLink[i].style.display = 'none';
        zoomIcon[i].style.display = 'none';
    });
}
for (let i = 0; i < projectInfo.length; i++) {
    projectInfo[i].addEventListener('mouseover', () => {
        projectInfo[i].style.transition = '0.5s';
        projectInfo[i].style.background = '#362f2d';
        projectLatest[i].style.opacity = '0.5';
        hoverLink[i].style.display = 'block';
        zoomIcon[i].style.display = 'block';
    });
    projectInfo[i].addEventListener('mouseout', () => {
        projectInfo[i].style.transition = '0.5s';
        projectInfo[i].style.background = '#fbfaf8';
        projectLatest[i].style.opacity = '1';
        hoverLink[i].style.display = 'none';
        zoomIcon[i].style.display = 'none';
    });
}
for (let i = 0; i < hoverLink.length; i++) {
    hoverLink[i].addEventListener('mouseover', () => {
        projectInfo[i].style.transition = '0.5s';
        projectInfo[i].style.background = '#362f2d';
        projectLatest[i].style.opacity = '0.5';
        hoverLink[i].style.display = 'block';
        zoomIcon[i].style.display = 'block';
    });
}
for (let i = 0; i < zoomIcon.length; i++) {
    zoomIcon[i].addEventListener('mouseover', () => {
        projectInfo[i].style.transition = '0.5s';
        projectInfo[i].style.background = '#362f2d';
        projectLatest[i].style.opacity = '0.5';
        hoverLink[i].style.display = 'block';
        zoomIcon[i].style.display = 'block';
    });

Answer 1

.block { 
  background-color: #fbfaf8; 
  transition: background-color .5s; 
} 
 
.block .image { 
  position: relative; 
  overflow: hidden; 
} 
 
.block .image .actions { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  top: 0; 
  visibility: hidden; 
  transform: translateY(100%); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: rgba(56, 46, 45, 0.7); 
  transition: visibility .5s, transform .5s; 
} 
 
.block .image .actions a { 
  font-size: 30px; 
  margin: 0 10px; 
  padding: 5px; 
  color: #bcb3a2; 
  transition: color .2s; 
} 
 
.block .image .actions a:hover { 
  color: #fff; 
} 
 
.block .description { 
  padding: 26px 15px; 
  color: #a79a8a; 
} 
 
.block .description h4 { 
  font-weight: 400; 
} 
 
.block .description p { 
  font-weight: 300; 
  transition: color .5s; 
} 
 
.block:hover { 
  background-color: #382e2d; 
} 
 
.block:hover .image .actions { 
  visibility: visible; 
  transform: translateY(0); 
  transition: visibility 0s, transform .5s; 
} 
 
.block:hover .description p { 
  color: rgba(255, 255, 255, 0.8); 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="container"> 
  <div class="row"> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
    <div class="col-4 px-1 mb-3"> 
      <div class="block"> 
        <div class="image"> 
          <img class="img-fluid" src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""> 
          <div class="actions"> 
            <a href="#!"> 
              <i class="fa fa-link"></i> 
            </a> 
            <a href="#!"> 
              <i class="fa fa-search"></i> 
            </a> 
          </div> 
        </div> 
        <div class="description"> 
          <h4>Claritas Etiam Processus</h4> 
          <p>Photography, Nature</p> 
        </div> 
      </div> 
    </div> 
 
  </div> 
</div>

Добавлю свой сниппет того, что это делается на CSS, как в принципе и нужно делать. Для таких задач нужно пихать то, что для этого предназначено.

Использовал Bootstrap и FontAwesome для сетки и иконок соотвественно.

Анимации накидал самые простые что есть, доводить до уж красоты не стал, чисто чтобы показать как это делается на CSS.

Answer 2

Это можно (и нужно) делать на чистом CSS. В CSS есть псевдо-класс :hover, который применяется к тем элементам, на которых находится указатель мыши.

Обратите внимание на то что мы можем указать :hover только для родительского элемента, а элементам внутри мы не делаем :hover (мы делаем .link:hover .img, но не .link .img:hover.

Еще стоит обратить внимание на то что :hover желательно применять к элементам, которые реагируют на клик мыши. Таким как ссылка или кнопка. В противном случае может получиться убого и непрофессионально: элемент меняет цвет, но на щелчёк не реагирует. Как говорится, гугл так не делает.

/* Стили по умолчанию */ 
.link { 
  display: inline-block; 
  text-align: center; 
  padding: 5px; 
} 
 
.link .img { 
  padding: 2px; 
  border: 1px solid Gray; 
} 
 
.link .text { 
  color: Green; 
  display: block; 
} 
 
/* Стили при наведении */ 
.link:hover { 
  background-color: Blue; 
} 
 
.link:hover .img { 
  border-color: Red; 
} 
 
.link:hover .text { 
  color: red; 
}

<a href="/link" class="link"> 
  <img src="https://picsum.photos/200/300" class="img" /> 
  <span class="text">Click me!</span> 
</a>

Answer 3

Если вы хотите уменьшить размер кода js для вставки стиля можно вставлять по несколько стилей сразу, использовав свой скрипт наподобие такого или можно использовать jquery css или http://zamjs.com/ Пример подобного подхода:

   var setStyle = function(p_elem, p_styles)
   {
       var s;
       for (s in p_styles)
       {
           p_elem.style[s] = p_styles[s];
       }
   }
   let projectLatest = document.querySelectorAll('.latest-project img'),
   projectInfo = document.querySelectorAll('.project-info'),
   hoverLink = document.querySelectorAll('.fa-link'),
   zoomIcon = document.querySelectorAll('.fa-search');
   for (let i = 0; i < projectLatest.length; i++) {
   setStyle(projectLatest[i], {'transition': '0.5s', 'opacity': '0.5'});
   setStyle(projectInfo[i], {'background': '#362f2d'});
   setStyle(hoverLink[i], {'display': 'block'});
   setStyle(zoomIcon[i], {'display': 'block'});
   }