3 крутых эффекта для изображений на CSS3
827материалов
228тем на форуме
3003комментария
6151пользователь

3 крутых эффекта для изображений на CSS3


Описание:

Современные технологии позволяют создавать красивые интерактивные сайты, при этом большинство эффектов можно реализовать с помощью чистого CSS, особенно с новыми возможностями CSS3. Раньше для создания разных эффектов мы прибегали к помощи JavaScript, но благодаря распространению поддержки CSS3, нам не нужны скрипты для создания красивых эффектов. К сожалению, некоторые браузеры до сих пор не поддерживают CSS3 (IE9 и ниже).
В этой статье мы создадим красивые эффекты при наведении на картинку. Эти эффекты идеально подойдут для галереи и помогут рационально разместить информацию.

1 пример (ДЕМО):

HTML разметка
Для первого примера мы будем использовать неупорядоченный список (ul), внутри которого расположим заголовок и описание картинки. Разметка для примера:
Код
<ul class="demo-1 effect">
                  <li>
                      <h2>Заголовок</h2>
                      <p>Описание.</p>
                  </li>
                  <li><img class="top" src="Ссылка на картинку" alt=""/></li>
</ul>
Для создания эффекта мы используем классы demo-1 и effect.

CSS
С помощью CSS мы позиционируем наш класс demo-1, устанавливаем ширину и высоту. Так же надо спрятать, то что не поместится в указанные размеры. Так же стилизуем заголовки h2 и тег <p>, в котором находится описание. Теперь класс нашего эффекта: мы позиционируем картинку абсолютно, чтобы управлять её положением с помощью свойств top, left, right. И с помощью CSS3 свойства transition создаем плавненькую анимацию. CSS код эффекта:
Код
.demo-1 {
                  position:relative;
                  width:300px;
                  height:200px;
                  overflow:hidden;
                  float:left;
                  margin-right:20px;
                  background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
                  color:#fff;
                  padding:10px;
                  left:-20px;
                  top:20px;
                  position:relative
}
.demo-1 p {
                  font-family:'Lato';
                  font-size:12px;
                  line-height:18px;
                  margin:0
}
.demo-1 h2 {
                  font-family:'Lato';
                  font-size:20px;
                  line-height:24px;
                  margin:0;
}
.effect img {
                  position:absolute;
                  margin:-15px 0;
                  right:0;
                  top:0;
                  cursor:pointer;
                  -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
                  -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
                  -o-transition:top .4s ease-in-out,right .4s ease-in-out;
                  transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
                  top:-230px;
                  right:-330px;
                  padding-bottom:200px;
                  padding-left:300px
}

2 пример (ДЕМО):

Во втором примере картинка будет съезжать вниз при наведении, показывая при этом заголовок и описание.

HTML разметка
Разметка очень похожа на предыдущий пример. Но теперь используется класс demo-2 и новый класс zero:
Код
<ul class="demo-2 effect">
                  <li>
                     <h2 class="zero">Заголовок</h2>
                     <p class="zero">Описание.</p>
                  </li>
                  <li><img class="top" src="Ссылка на картинку" alt=""/></li>
</ul>

CSS
CSS тоже очень похож на первый пример, за исключением того, что теперь для анимации используется свойство bottom. Опять используем CSS3 transition для плавной анимации:
Код
.demo-2 {
                  position:relative;
                  width:300px;
                  height:200px;
                  overflow:hidden;
                  float:left;
                  margin-right:20px;
                  background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
                  color:#fff;
                  padding:10px;
                  left:-20px;
                  top:20px;
                  position:relative
}
.demo-2 p {
                  font-family:'Lato';
                  font-size:12px;
                  line-height:18px;
                  margin:0
}
.demo-2 h2 {
                  font-size:20px;
                  line-height:24px;
                  margin:0;
                  font-family:'Lato'
}
.effect img {
                  position:absolute;
                  left:0;
                  bottom:0;
                  cursor:pointer;
                  margin:-12px 0;
                  -webkit-transition:bottom .3s ease-in-out;
                  -moz-transition:bottom .3s ease-in-out;
                  -o-transition:bottom .3s ease-in-out;
                  transition:bottom .3s ease-in-out
}
.effect img.top:hover {
                  bottom:-96px;
                  padding-top:100px
}
h2.zero,p.zero {
                  margin:0;
                  padding:0
}

3 пример (ДЕМО):

Для последнего примера создадим эффект переворачивающейся карты: при наведении на картинку, она будет вращаться вокруг своей оси и показвать описание и заголовок.

HTML разметка
На этот раз разметка немного изменится. Мы будем использовать HTML5 элемент figure вместе с figcaption. И, как обычно, класс поменялся на demo-3:
Код
<ul class="demo-3">
                  <li>
                      <figure>
                          <img src="Ссылка на картинку" alt=""/>
                          <figcaption>
                    <h2>Заголовок</h2>
                    <p>Описание</p>
                          </figcaption>
                      </figure>
                  </li>
</ul>

CSS
В этом примере мы будем использовать свойство backface-visibility, чтобы делать картинку прозрачной при перевороте. Для вращения мы используем свойство transform: начальное значение — rotateY(-180deg) и при наведении меняем на 180 и для изображения и для заголовка.
Код
.demo-3 {
                  position:relative;
                  width:300px;
                  height:200px;
                  overflow:hidden;
                  float:left;
                  margin-right:20px
}
.demo-3 figure {
                  margin:0;
                  padding:0;
                  position:relative;
                  cursor:pointer;
                  margin-left:-50px
}
.demo-3 figure img {
                  display:block;
                  position:relative;
                  z-index:10;
                  margin:-15px 0
}
.demo-3 figure figcaption {
                  display:block;
                  position:absolute;
                  z-index:5;
                  -webkit-box-sizing:border-box;
                  -moz-box-sizing:border-box;
                  box-sizing:border-box
}
.demo-3 figure h2 {
                  font-family:'Lato';
                  color:#fff;
                  font-size:20px;
                  text-align:left
}
.demo-3 figure p {
                  display:block;
                  font-family:'Lato';
                  font-size:12px;
                  line-height:18px;
                  margin:0;
                  color:#fff;
                  text-align:left
}
.demo-3 figure figcaption {
                  top:0;
                  left:0;
                  width:100%;
                  height:100%;
                  padding:29px 44px;
                  background-color:rgba(26,76,110,0.5);
                  text-align:center;
                  backface-visibility:hidden;
                  -webkit-transform:rotateY(-180deg);
                  -moz-transform:rotateY(-180deg);
                  transform:rotateY(-180deg);
                  -webkit-transition:all .5s;
                  -moz-transition:all .5s;
                  transition:all .5s
}
.demo-3 figure img {
                  backface-visibility:hidden;
                  -webkit-transition:all .5s;
                  -moz-transition:all .5s;
                  transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
                  -webkit-transform:rotateY(180deg);
                  -moz-transform:rotateY(180deg);
                  transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
                  -webkit-transform:rotateY(0);
                  -moz-transform:rotateY(0);
                  transform:rotateY(0)
}

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.10.2015 в 13:30
Материал просмотрен: 2160 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 10 комментариев

Пожаловаться
Сказать спасибо

10 комментариев


maks@@@
Крут прикольный=)
71_nik
Николай @71_nik 20.10.2015 19:112
+3
Вот это реально круто like
serwsi
Спасибо автору. Я уже это использовал, очень понравилось. Но есть один минус: Сафари не открывает текст за картинками, они просто поворачиваются в зеркальное изображение.


Можно сделать, чтобы Сафари страница тоже открывалась корректно?
Ромчик
Версия браузера safari какая?
serwsi
Версия 5.1.7 - старая для Виндовс. А на айфоне не знаю - не мой аппарат. Но смотрел на двух айфонах )
Ромчик
Тогда понятно. Там много чего не работает, даже системные обновления. Это браузер уже давно заброшен и мало кто им пользуется)
serwsi
Я так и подумал сначала. И сам им не пользуюсь, просто когда-то установил для проверки. А вот с айфонами напрягло. Неужели у всех старьё?
Ромчик
На счет айфона не знаю, я им не пользуюсь. У меня андроид и все работает нормально
serwsi
Это я про третий вариант :)
Картинки, конечно, поставил свои.
simox
dfsd sdfsdf @simox 21.11.2015 04:3810
0
Есть живые?) подсобите с кодом)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта