Смена изображения при наведении на CSS без Javascript

CSS3

CSS3

При создании сайтов мы сталкиваемся с различными задачами, которые могут быть решены различными способами. Сегодня о том, как просто, с использованием только CSS изменить изображение при наведении на него курсора.Давайте сформулируем нашу задачу. Итак, есть блок, внутри которого два изображения (одно наложено на другое посредством задания абсолютного позиционирования). Наша задача — при наведении мыши сделать так, чтоб на месте верхнего изображения появилось то, которое под ним. Но самый смак в том, что смена будет происходить плавно, а не мгновенно. Прямо как с использованием Javascript :) Итак, приступаем.

Для начала подготовим два изображения одинакового размера. К примеру, таких:

HTML5

HTML5

CSS3

CSS3

 

 

 

 

 

Подготовим html разметку:

<div id="img_container">
<img class="bottom" src="html5.jpg" />
<img class="top" src="css3.jpg" />
</div>

Здесь все просто — у нас есть контейнер, в котором находятся две картинки — html5.jpg с классом bottom и css3.jpg с классом top.

Теперь займемся самым главным — css. Он может быть таким:

#img_container {
position:relative;
height:400px;
width:400px;
margin:0 auto;
cursor:pointer;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#img_container img.top:hover {
opacity:0;
}

Тут все довольно просто — картинка с логотипом css лежит поверх картинки с лого html5. При наведении курсора мыши на верхнюю картинку мы меняем ее прозрачность до нуля, т. е делаем ее полностью прозрачной, что приводит к тому, что «проявляется» картинка, лежащая под ней. Лучше один раз увидеть — смотрим демо Смена изображения при наведении на CSS без Javascript

 

Меток нет. Похожие записи
Запись опубликована в рубрике CSS и все, что связано со стилями. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>