Главная » Каталог » Эффекты с изображениями » 3 варианта CSS3 HOVER-эффекта для изображений с подписями

Эффекты с изображениями

3 варианта CSS3 HOVER-эффекта для изображений с подписями



В современном интернет-сообществе существует множество методов, используемых для создания интерактивности на сайте, но, пожалуй, наиболее элегантным остаётся CSS, и, в частности, возможности, пришедшие к нам с появлением CSS3. Раньше, для создания каких-то эффектов, мы прибегали к помощи JavaScript технологий, но теперь, благодаря всё более растущей поддержке многими современными браузерами технологий CSS3, реализовать эффекты сейчас можно без каких-либо скриптов. Здесь мы рассмотрим три варианта различных эффектов для изображений, суть которых: появляющаяся подпись к изображению, сопровождается каким-то эффектом.

Общие файлы стилей, используемые для всех трёх вариантов:

Код

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">


Вариант 1

Демо

HTML

Код

<ul>
<li>
  <ul class="demo-1 effect">
  <li>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </li>
   
  <li><img class="top" src="images/image1.jpg" alt=""/></li>
  </ul>
</li>

<li>
  <ul class="demo-1 effect">
  <li>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </li>
   
  <li><img class="top" src="images/image2.jpg" alt=""/></li>
  </ul>
</li>

<li>
  <ul class="demo-1 effect">
  <li>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </li>
   
  <li><img class="top" src="images/image3.jpg" alt=""/></li>
  </ul>
</li>

</ul>


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

Код


<ul>
<li>
  <ul class="demo-2 effect">
  <li>
  <h2 class="zero">This is a cool title!</h2>
  <p class="zero">Lorem ipsum dolor sit amet.</p>
  </li>
   
  <li><img class="top" src="images/image1.jpg" alt=""/></li>
  </ul>
</li>

<li>
  <ul class="demo-2 effect">
  <li>
  <h2 class="zero">This is a cool title!</h2>
  <p class="zero">Lorem ipsum dolor sit amet.</p>
  </li>
   
  <li><img class="top" src="images/image2.jpg" alt=""/></li>
  </ul>
</li>

<li>
  <ul class="demo-2 effect">
  <li>
  <h2 class="zero">This is a cool title!</h2>
  <p class="zero">Lorem ipsum dolor sit amet.</p>
  </li>
   
  <li><img class="top" src="images/image3.jpg" alt=""/></li>
  </ul>
</li>

</ul>


CSS

Код

.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

Код

<ul>
  <li>
  <ul class="demo-3">
  <li>
  <figure>
  <img src="images/image1.jpg" alt=""/>
  <figcaption>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </figcaption>
  </figure>
   
  </li>
  </ul>
  </li>
  <li>
  <ul class="demo-3">
  <li>
  <figure>
  <img src="images/image2.jpg" alt=""/>
  <figcaption>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </figcaption>
  </figure>
  </li>
  </ul>
  </li>
  <li>
  <ul class="demo-3">
  <li>
  <figure>
  <img src="images/image3.jpg" alt=""/>
  <figcaption>
  <h2>This is a cool title!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
  </figcaption>
  </figure>
  </li>
  </ul>
  </li>
</ul>


CSS

Код

ul li {
  display:inline-block;
  margin:0 10px
}

.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)
}
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

    5 вариантов CSS3 HOVER-эффектов для изображений

    18.01.2017

    Рассмотрим пять различных вариантов эффектов для изображений при наведении, в которых используя свойство border, мы получаем довольно специфичные эффекты. Обращаю внимание, что демо-примеры будут работать только в современных браузерах, поддерживающих CSS3.

    Комментарии: 0   Просмотры: 196

    15 HOVER-эффектов для изображений с помощью CSS

    18.01.2017

    CSS-технологии в настоящее время дают широкий спектр возможностей для создания различных эффектов, переходов, анимаций, которые визуально делают работу пользователя с элементами сайта более привлекательной. В этом материале мы рассмотрим 15 различных HOVER-эффектов для изображений, которые могут украсить фотогалерею вашего сайта или портфолио.

    Комментарии: 0   Просмотры: 218

    Hover.css - набор CSS3 эффектов для элементов страницы сайта

    12.11.2016

    Hover.css представляет собой таблицу CSS-стилей, применимых к различным элементам на странице сайта (ссылкам, кнопкам, логотипам, SVG и просто изображениям), дающих в итоге различные визуальные эффекты, как то: трансформация, фоновые и граничные переходы, тени и свечение, пузыри и загнутые уголки и прочее. Вся прелесть в том, что вам достаточно подключить файл стилей hover.css на страницах своего сайта и прописать для нужных элементов страниц соответствующие эффектам классы и всё, можете любоваться!

    Комментарии: 0   Просмотры: 241

Хостинг от uCoz