Увеличение картинки при наведении | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Эффекты увеличения » Увеличение картинки при наведении | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Увеличение картинки при наведении | Скрипт для сайта


Плавное увеличение картинки без применения скриптов


Увеличение происходит с применением свойства transition из CSS3.Можно изменить параметры перехода по своему усмотрению.Возможны два варианта установки,с горизонтальным и вертикальным построением изображений.Стили можно прописывать непосредственно в материале установки,ниже основного контента.Количество картинок может быть увеличено до требуемого количества.Посмотреть эффект увеличения можно в редакторе HTML,для этого скопируйте код в редактор и нажмите чтобы посмотреть результат.

Пример горизонтального построения картинок


<div class="dszoomimg">
<img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка" >
<img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка">
<img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка">
</div>
<style>
.dszoomimg {
display:table;
margin:0 auto;
padding:20px;
}
img.dszoom {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background: blue;
width: 150px;
border: 10px solid blue;
margin: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
vertical-align: middle;
}
img.dszoom:hover {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 300px;
margin: -40px;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
z-index: 7;
}
</style>

Пример вертикального построения картинок


<div class="dszoomimg">
<div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка" ></div>
<div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка"></div>
<div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка"></div>
</div>
<style>
.dszoomimg {
display:table;
margin:0 auto;
padding:20px;
}
.dszoomimg-y {
height: 260px;
width: 150px;
margin: 0;
}
img.dszoom {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background: blue;
width: 150px;
border: 10px solid blue;
margin: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
vertical-align: middle;
}
img.dszoom:hover {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 300px;
margin: -40px;
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
z-index: 7;
}
</style>

Подробнее о настройках

Изменяем голубой фон картинки на свой здесь

background: blue;

Изменяем размер картинки до увеличения здесь

width: 150px;

Изменяем рамку картинки здесь

border: 10px solid blue;

Изменяем время увеличения 0.5s здесь

-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;

Изменяем размер картинки после увеличения здесь

width: 300px;

Изменяем высоту картинки,в вертикальном построении здесь

height: 260px;

Проверить действие скрипта

Для проверки кода скопируйте его в редактор HTML.Внимание!!! Фон страницы редактора белого цвета,а в обрамлении картинки применяется эффект тени приближённый к светлому тону,его на белом фоне будет плохо видно.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 4494 | Добавил: IZOTOP | Рейтинг: 5.0/2
    | Теги: увеличение при наведении, CSS3, zoom

    Всего комментариев: 4
    0   Спам
    3 golubaya-buhta2008   (03.06.2016 21:05)
    Аватар golubaya-buhta2008 Спасибо Вам большое! Здорово получилось на САЙТЕ . Хотел еще вертикальные поставить но размер меньше 150px не делается почему-то. Что можете посоветовать?

    0  
    4 bootstraptema_   (09.06.2016 13:38)
    Аватар bootstraptema_ Почему не делается? Вот я попробовал на 100:

    Код

    <div class="dszoomimg">
    <div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка" ></div>
    <div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка"></div>
    <div class="dszoomimg-y"><img src="http://delaisait.ucoz.ru/images/mainboxicon.png" class="dszoom" alt="Картинка"></div>
    </div>
    <style>
    .dszoomimg {
    display:table;
    margin:0 auto;
    padding:20px;
    }
    .dszoomimg-y {
    height: 260px;
    width: 100px;
    margin: 0;
    }
    img.dszoom {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    background: blue;
    width: 100px;
    border: 10px solid blue;
    margin: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: relative;
    vertical-align: middle;
    }
    img.dszoom:hover {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    width: 300px;
    margin: -40px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    z-index: 7;
    }
    </style>

    0   Спам
    1 engavis   (24.01.2014 13:36)
    Аватар engavis Добавил такой код на свой сайт. Немного подделал под себя, но вот вопрос: "Горизонтальный и вертикальный скрипт отличаются друг от друга. В горизонтальном при увеличении картинки другие раздвигаются, в вертикальном такого нет. Как сделать так же и в горизонтальном?"

    0   Спам
    2 IZOTOP   (24.01.2014 20:09)
    Аватар IZOTOP Принципиальной разницы нет, по умолчанию, если позицыонирование элемента не определено он будет иметь состояние (float:left):
    Исходное состояние


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]