Скрипт или эффект увеличения

[Juiseed]

Кто может подсказать, где найти скрипт или с помощью css как можно реализовать эффект увеличения при наведении на картинку? Только нужен не тот эффект, который увеличивает полностью картинку, а тот, который увеличивает само изображение в картинке, не увеличивая при этом рамку. Фактически размеры картинки не должны увеличиваться, а должно как бы приближаться изображение. Надеюсь правильно обьяснил

[vold57]

Для реализации эффекта увеличения изображения при наведении на него можно использовать CSS. Вот пример, как это можно сделать:

HTML:
<div class="image-container">
  <img src="your-image.jpg" alt="Your Image" class="zoom-image">
</div>


CSS:
.image-container {
  position: relative;
  overflow: hidden;
}

.zoom-image {
  transition: transform 0.6s;
}

.image-container:hover .zoom-image {
  transform: scale(1.2);
}


Обратите внимание, что в данном примере мы используем свойство `transform: scale(1.2);` для увеличения изображения при наведении на него, при этом рамка картинки остается на месте без изменений. Однако размеры самой картинки не увеличиваются, как и требовалось.


вот ещё один способ реализовать такой эффект с помощью CSS:

HTML:
<div class="image-container">
  <img src="your-image.jpg" alt="Your Image" class="zoom-image">
</div>


CSS:
.image-container {
  overflow: hidden;
  position: relative;
  width: 200px; /* Замените на ширину вашей картинки */
  height: 200px; /* Замените на высоту вашей картинки */
}

.zoom-image {
  transition: transform 0.6s;
  display: block;
  width: 100%;
  height: auto;
}

.image-container:hover .zoom-image {
  transform: scale(1.2);
  transform-origin: 50% 50%;
}


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



Может подойдет скрипт лупы?

[Juiseed]

Может подойдет скрипт лупы?

Суть эта, только нужно, что бы полностью картинка увеличивалась
Добавлено: 17-06-2014, 00:12:14

Сделал с помощью css

Код Выделить Развернуть

.zooms {width:280px; height:135px; display:block; overflow:hidden; border: 4px solid #2D2D2D; float: left;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
margin: -5px 10px 5px 0;}
.zoom img {
width: 280px;
height: 135px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;}
.zoom img:hover {width: 310px;height: 160px;}
Только увеличение происходит от угла картинки, а хотелось бы от центра, что бы одинаково во все стороны увеличивалась, а не только вправо и вниз. Это можно как то реализовать? Пример этого кода смотрите на картинках новостей моего сайта (в подписи)

[UnitZ]

Для селектора .zoom img:hover используйте transform вместо width и height, например:

.zoom img:hover {
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
}