Урок 2. CSS эффекты с изображениями
Продолжим небольшую серию уроков, которая связана непосредственно с применением различного рода эффектов с изображениями. Как уже оговаривалось в предыдущем уроке, сегодня мы поговорим о том, как с помощью CSS кода добиться эффекта увеличения изображения при наведении на него указателя мыши. Замечу, что такого рода эффект будет смотреться на сайтах с рекламной тематикой. Так как рекламный блок (изображение) будет плавно увеличиваться при наведении, что придаст оригинальность вашему сайту. Я сам пока не нашел применение данному коду на своих страницах.
Тем не менее считаю, что многим этот урок поможет на практике. Так что давайте приступим к рассмотрению урока. Ниже вы увидите опять таки код CSS, который необходимо прописать в голове сайта:
Шаг 1. Копируем CSS в хедер
Заключаем код между тегами <style>...</style> и копируем в <head>...</head> область в настройках Jimdo.
В примере показано 2 блока, один из которых контейнер. Его нужно копировать в шапку вместе с основным кодом в том случае, если вы собираетесь выстраивать изображения в вертикальном порядке, т.е. в столбец. А в остальном он будет лишним.
/*Вертикальный контейнер*/
#containerEx2 {
clear: both;
width: 300px;
margin: 0 auto;
min-height: 600px;
}
/*Эффект увеличения изображения*/
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
Шаг 2. Применяем два варианта кода по назначению
<!-- С использованием контейнера -->
<div id="containerEx2">
<div id="ex2">
<img src="http://site.ru/image.jpg">
<img src="http://site.ru/image.jpg">
<img src="http://site.ru/image.jpg">
<img src="http://site.ru/image.jpg">
</div>
</div>
<!-- Без использования контейнера -->
<div id="ex2">
<img src="http://site.ru/image.jpg">
</div>
Комментарии:
Нету комментариев для вывода...