• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

CSS : Увеличение изображения при наведении

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

  1. Главная
  2. Все про CSS

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

Слева пример отображения.

При наведении мыши на изображение, картинка увеличивается, пример:

<div class="bgc-good gd"><div class="bgc-name"><a href="doors-view-42.html" title="С 14 О">С 14 О</a>
 </div><div class="bgc-img"><img class="lup" src="uploads/doors/doors-VU6bRHrGqL.jpg"></div>
<div class="bgc-price">1350 руб.</div><div class="bgc-buy">
<a href="doors-view-42.html" class="b1c" title="С 14 О">Подробнее</a></div></div>
<div class="bgc-good gd"><div class="bgc-name"><a href="doors-view-43.html" title="С 14 Г">С 14 Г</a>
 </div><div class="bgc-img"><img class="lup" src="uploads/doors/doors-72ytLT3yP5.jpg"></div>
<div class="bgc-price">1350 руб.</div><div class="bgc-buy">
<a href="doors-view-43.html" class="b1c" title="С 14 Г">Подробнее</a></div></div>

вот пример css:

.bgc-img img{
display: block;
margin: 0 auto;
max-width: 200px;
max-height: 200px;
-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*/
opacity: 0.9; margin: 0 25px;
}
.bgc-img img:hover{
-webkit-transform:scale(2.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(2.1); /*Mozilla scale version*/
-o-transform:scale(2.1); /*Opera scale version*/
box-shadow:0px 0px 20px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 20px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 20px gray; /*Mozilla shadow version*/
opacity: 1; border: 1px solid gray; margin: 0; padding: 5px; background: white;
z-index:1000; position: absolute;
}

Пример:

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©