• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Hover эффект для увеличение изображения (Эффект приближения зума на CSS для картинок)
Hover эффект для увеличение изображения
Kosten
Дата: Среда, 2019-08-07, 19:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


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

Нам нужен элемент контейнера, который будет наведен, а затем изображение внутри него должно соответствующим образом анимироваться, а точнее увеличивать или уменьшать в соответствии с необходимостью.

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



HTML

Код
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>

<div class="container" style="margin-top:30px;">
  <div class="row">
    
    <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-1.jpg" alt="...">
        </a>
      </div>
      
    </div>
    
    
    <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-2.jpg" alt="...">
        </a>
      </div>
      
    </div>
    
    
    
    <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-3.jpg" alt="...">
        </a>
      </div>
      
    </div>
    
     <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-1.jpg" alt="...">
        </a>
      </div>
      
    </div>
    <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-2.jpg" alt="...">
        </a>
      </div>
      
    </div>
    <div class="col-md-4">
      
      <!--  Блок с изображением -->
      <div class="img-container">
        <a href="#">
          <img src="https://svsites.ru/demo/img/img-3.jpg" alt="...">
        </a>
      </div>
      
    </div>   
    
  </div>
</div>

  </body>
</html>

CSS

Код
.img-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.4);
}
.img-container a:hover img {
    -webkit-transform: scale(1.1);
    -ms-ransform: scale(1.1);
    transform: scale(1.1);
}

.img-container img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-backface-visibility: hidden;
}


Демонстрация
Прикрепления: 8393049.png(63.6 Kb) · hover.zip(3.8 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2019-08-07, 19:37 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


Есть много версий увеличить изображение, в том случай, это когда вы наводите на его клик. Этот вариант аналогичен заголовку, но только сама функция отличается от других вариантов.

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

HTML

Код
   <img src="http://zornet.ru/_fr/82/6465519.jpg" alt="" class="izmeneniye-masshtaba">
   <img src="http://zornet.ru/_fr/82/3041778.jpg" alt="" class="izmeneniye-masshtaba">
   <img src="http://zornet.ru/_fr/82/3301764.jpg" alt="" class="izmeneniye-masshtaba">

CSS

Код
   .izmeneniye-masshtaba {
    transition: 1s; /* Время эффекта */
   }
   .izmeneniye-masshtaba:hover {
    transform: scale(1.2);
     cursor:pointer;
   }


Демонстрация
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Hover эффект для увеличение изображения (Эффект приближения зума на CSS для картинок)
  • Страница 1 из 1
  • 1
Поиск: