5 простых эффектов наложения для изображений

5 простых эффектов наложения для изображенийВ этой статье мы рассмотрим с вами 5 полезных, достаточно простых и увлекательных эффектов наложения, которые используются для изображений. Те кто занимаются веб разработкой не по наслышке знают об Hover эффекте, так как его очень часто приходится описывать. Все эффекты используют мощь CSS3.

1. Эффект увеличения заключается в том, чтобы увеличить миниатюру до необходимых размеров. Так чтобы пользователь смог рассмотреть детали.

HTML код

<div class="grow pic">  <img src="http://lorempixel.com/400/400/people/9" alt="portrait"></div>

CSS код

.grow img {
  height: 300px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 400px;
  height: 400px;
}

2. Теперь рассмотрим обратный эффект — эффект уменьшения. По умолчанию пользователь видит увеличенное изображение, которое после можно уменьшить до небольших размеров, чтобы картина полностью оказалась в выбранном окне.
HTML код

<div class="shrink pic">  <img src="http://lorempixel.com/400/400/nightlife/4" alt="city"></div>

CSS код

.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}

3. Этот эффект позволяет передвигать изображения в горизонтальной плоскости. Так что вы можете показать, к примеру начало картины, а её конец пользователь сможет увидеть только после того как наведёт курсор мыши на миниатюру и само изображение плавно передвинется в видимую область.
HTML код

<div class="sidepan pic">  <img src="http://lorempixel.com/600/300/sports/8" alt="kick"></div>

CSS код

.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.sidepan img:hover {
  margin-left: -200px;
}

4. Вертикальное передвижение. Имеет такой же эффект как и прошлый, с одним исключением, картина будет двигаться в вертикальной плоскости. Этотт эффект будет весьма востребованным для фотографий, которые имееют большую высоту.
HTML код

<div class="vertpan pic">  <img src="http://lorempixel.com/300/600/sports/5" alt="climb"></div>

CSS код

.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.vertpan img:hover {
  margin-top: -200px;
}

5. Как сделать из квадрата круг при наведения курсора мыши. Ещё этот эффект называют — наведение фокуса. Очень интересный эффект, основное преимущество которого заключается в том, что его описание достаточно простое и лёгкое, а сам эффект необычный. И так, для того чтобы квадратное изображение слегка обрезать, наложим на неё маску необходимо внести следующие строки кода.
HTML код

<div class="focus pic">    <img src="http://lorempixel.com/300/300/sports/1" alt="cricket"></div>

CSS код

.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}


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

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