• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Hover эффект для увеличение изображения (Эффект приближения зума на CSS для картинок)
Hover эффект для увеличение изображения
Kosten
 Среда, 07 Августа 2019, 19:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44171
Награды: 70
« 565 »
 Красиво сделано плавное увеличение картинки изображения на сайте при наведение на его курсором. Здесь увеличение идет в самом блоке а не самого снимка на полный размер. Где вы устанавливаете картинку и подключаете к нему класс, что как раз будит отвечать за этот прекрасный эффект.

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

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



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
 Среда, 07 Августа 2019, 19:37 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44171
Награды: 70
« 565 »
 Есть много версий увеличить изображение, в том случай, это когда вы наводите на его клик. Этот вариант аналогичен заголовку, но только сама функция отличается от других вариантов.

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

HTML

Код
   <img src="https://zornet.ru/_fr/82/6465519.jpg" alt="" class="izmeneniye-masshtaba">
   <img src="https://zornet.ru/_fr/82/3041778.jpg" alt="" class="izmeneniye-masshtaba">
   <img src="https://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 ]
Форум » Веб-разработка » HTML + CSS — коды » Hover эффект для увеличение изображения (Эффект приближения зума на CSS для картинок)
  • Страница 1 из 1
  • 1
Поиск: