КАК СДЕЛАТЬ ВСПЛЫТИЕ ПРИ НАВЕДЕНИИ?

Всё насамомделе очень просто мы будем использовать только чистый CSS и HTML.

Для начала напишем HTML разметку.

		
			
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div class="wrap">
  <div class="block">
    <div class="photo">
     <img src="ссылка на картинку">
    </div>
  </div>
 </div>
</body>
</html>
			
		
	

Мы создаем DIV с классом. В этом DIV ещё один див с другим классом и в DIV с классом block Помещаем DIV c классом photo и накаонец там уже размещем само изображение. Знаю, что можно было сделать по проще, но я не ищу легкх путей главное чтоб работало все четко и быстро!

Напишем CSS

		
			
.wrap{
	
 margin-left: 35px;

}
.block {
 width: 50%;
}
.photo img{
 border-radius: 10px;
 width: 100%;
 height: 100%;
 transition: transform 0.5s;
}
.photo:hover img
{
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
			
		
	

Картинке задаем свойство высоту и ширину и время всплытия пол секунды. Далее пишем :hover что значит при наведении и указываем параметры для размыти.

Можете не указывать параметр класса wrap это не обезательно!

Наведи на картинку!

+ 1

Комментарии

Чтобы оставить свой комментарий, вы должны авторизироваться или зарегистрироваться!

Войти Зарегистрироваться