Главная » Файлы » Прочие скрипты » CSS
Эффектное увеличение изображение с использованием CSS3
24.06.14, 09:04:44



Всем привет.
Как мы уже с вами заметили на сайте довольно много эффектов с изображениями.
Но каждый код скрипта, по своему уникален, и непохож на другой.
Поэтому предоставляю вашему вниманию еще одну работу с использованием css3.

ДЕМО

При наведении курсора, каждое изображение медленно увеличивается в размерах,
потом возвращается в начальное состояние.
Данный эффект красиво работает в браузерах с поддержкой CSS3 т как Google Chrome.
Для данного эффекта используется изображение размером 400х133 px.
Для уменьшения размера изображение с помощью CSS 300х100 px.

Сам код CSS3
Код
#container {  
width: 300px;  
margin: 0 auto;  
  }  

  #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;  
  }


Внутри блока вы можете прописать вот таким образом.
Код
<div id="containerEx2">  
  <div id="ex2">  
  <img src="/images/ex2.jpg"><br/>  
  <img src="/images/ex2.jpg"><br/>  
  <img src="/images/ex2.jpg"><br/>  
  <img src="/images/ex2.jpg">  
  </div>  
  </div>


Или же попробовать поэкспериментировать, заключив код в информер,
это уже на ваше усмотрение.
Всем удачи

Материал подготовил: Bizon

Сайт урока: http://designshack.net
Категория: CSS | Добавил: Apocalypse | Теги: изображение, увеличение, Эффектное, CSS3, использованием
Просмотров: 398 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: