• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Как увеличить изображение на чистом CSS (Сделать увеличение изображения при наведении на чистом CSS3)
Как увеличить изображение на чистом CSS
Kosten
Вторник, 30 Июня 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Создать увеличение картинки или изображение, где только задействуем CSS3, что безусловно будет без скриптов и различных библиотек. Вам только нужно знать, если вы ставите под галерею, то здесь должно быть изображение лучше по одному размеру или немного, чтоб отличалось. То при увеличении если будут разные размеры картинки, то покажется некоторые не корректны.

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

При открытии видим:



Здесь увеличение создан на 300 пикселей:



HTML

Код
<div class="dolushasa_akasuinka">
  <img src="http://zornet.ru/_fr/56/1625717.jpg" alt="img" width="200px" height="200px" tabindex="0">
   <img src="http://zornet.ru/_fr/56/4758203.jpg" alt="img" width="200px" height="200px" tabindex="0">
   <img src="http://zornet.ru/_fr/56/7402530.jpg" alt="img" width="200px" height="200px" tabindex="0">
</div>

CSS

Код
.dolushasa_akasuinka {
    position: absolute;
    width: 615px;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

img[tabindex="0"] {
  cursor: zoom-in;
}
img[tabindex="0"]:focus {
  position: fixed;
  z-index: 1;
  width: 850px;
  height: 835px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin: auto;
  box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(59,59,59,.4);
  outline: 2px solid #fff;
}
img[tabindex="0"]:focus,
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  transition: width .3s, height .3s .1s;
}

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

Демонстрация
Прикрепления: 7265450.jpg (26.5 Kb) · 2225920.jpg (31.3 Kb) · zoom-picture-cs.zip (2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Как увеличить изображение на чистом CSS (Сделать увеличение изображения при наведении на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: