»

 Будь в курсе событий:

urok2 css effekti s izobrajeniyami

Урок 2. CSS эффекты с изображениями
Урок 2. CSS эффекты с изображениями

Второй урок, в котором мы рассмотрим еще один css эффект при наведении на изображение.

Урок 2. CSS эффекты с изображениями

Продолжим небольшую серию уроков, которая связана непосредственно с применением различного рода эффектов с изображениями. Как уже оговаривалось в предыдущем уроке, сегодня мы поговорим о том, как с помощью CSS кода добиться эффекта увеличения изображения при наведении на него указателя мыши. Замечу, что такого рода эффект будет смотреться на сайтах с рекламной тематикой. Так как рекламный блок (изображение) будет плавно увеличиваться при наведении, что придаст оригинальность вашему сайту. Я сам пока не нашел применение данному коду на своих страницах.

Тем не менее считаю, что многим этот урок поможет на практике. Так что давайте приступим к рассмотрению урока. Ниже вы увидите опять таки код CSS, который необходимо прописать в голове сайта:

Шаг 1. Копируем CSS в хедер

Заключаем код между тегами <style>...</style> и копируем в <head>...</head> область в настройках Jimdo.

 

В примере показано 2 блока, один из которых контейнер. Его нужно копировать в шапку вместе с основным кодом в том случае, если вы собираетесь выстраивать изображения в вертикальном порядке, т.е. в столбец. А в остальном он будет лишним.

css
/*Вертикальный контейнер*/
#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. Применяем два варианта кода по назначению

html
    <!-- С использованием контейнера -->
    <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>

html
    <!-- Без использования контейнера -->
            <div id="ex2">
                <img src="http://site.ru/image.jpg">
            </div>

Шаг 3. Живой пример без использования контейнера

Если урок был вам полезен, оставляйте свои комментарии.

Оставить комментарий

Комментарии: 0