Можно получить потрясающий эффект "всплывания" изображения с помощью jQuery. Но теперь CSS3 позволяет добиться такого же результата с использованием свойств transition и transform без задействования дополнительных ухищирений.

К сожалению, описанный в данном уроке метод пока работает только с браузерами Safari и Chrome.

HTML
В HTML элементе нам нужно создать один контейнер, который будет размещать изображение со слоем, который располагается сверху над изображением. Здесь первым делом определяется класс images с id, соответствующим номеру изображения, и два элемента - один является слоем и второй представляет изображение. Таким же образом создается элементы для всех изображений.

<div class='images' id='image1'>
<div class='layer'></div>
<img src='i1.jpg' />
</div>
 
<div class='images' id='image2'>
<div class='layer'></div>
<img src='i1.jpg' />
</div>	
 
<div class='images' id='image3'>
<div class='layer'></div>
<img src='i1.jpg' />
</div>	
 
<div class='images' id='image4'>
<div class='layer'></div>
<img src='i1.jpg' />
</div>

CSS3
Здесь мы первым делом используем свойство transform только для масштабирования изображения, когда страница только загружается. Затем при "всплывании" мы сделаем размер изображения больше. Также мы используем свойство transition duration со значением в полсекунды для выполнения анимации трансоформации. "Всплывание" изображения от меньшего размера к большему будет происходить в течении пол-секунды. Также нужно очистить слой, который layer располагается над изображениями. Как только курсор мыши помещается над изображением слой layer удаляется с использованием крутого эффекта. Здесь также используется свойство transition duration для установки времени выполнения операции. Также индивидуально для каждого изображения устанавливается различные свойства слоя layer для получения различных эффектов.

.images{	
	float:left;
	margin-left:10px;
	margin-right:-20px;
	margin-top:-10px;
	-webkit-transform:scale(0.6);/*Начальный размер изображения при загрузке страницы*/
	-webkit-transition-duration: 0.5s;/*Время перехода от маленького размера к большому*/
}
.images:hover{
	-webkit-transform:scale(0.8);/*Когда курсор мыши проходит над изображением, оно увеличивается в размере*/
	-webkit-box-shadow:0px 0px 40px #ccc;
}	 
.images .layer{
	width: 100%;
	height: 100%;
	background-color:#000;
	position: absolute;	 
	opacity:0.5;
	-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
	width:0%;	
}
#image2:hover .layer{
    height:0%;
}
#image3:hover .layer {
	height:0%;	
	margin-top:150px;
}
#image4:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
}

Добавлено: 08 Мая 2018 17:17:19 Добавил: Андрей Ковальчук Нравится 0

Добавить