Как сделать увеличение изображения при наведении на него курсора

Дата последнего изменения:

Чтобы изображения товаров увеличивались при наведении на них курсора в режиме просмотра "Сетка", примените следующий CSS-код:


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
 
td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}

Пример также описан здесь: http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/. Спасибо, Майку, за прекрасную идею.

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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 5
Остались вопросы?
Обратитесь за помощью
  • Форум

    Общайтесь с другими пользователями Эквида и командой поддержки клиентов по любым вопросам, связанным с работой вашего магазина.

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.