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

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

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



Это - простейшая структура, позволяющая реализовать все эти эффекты. Как вы можете увидеть из кода ниже, мы создаём родительский класс view с cодержимым внутри. Также мы создали класс mask, где мы и применяем CSS3 переходы, чтобы добиться HOVER-эффекта.
В последующих ниже примерах этот синтаксис может незначительно видоизменяться, в зависимости от эффекта, который мы хотим применить.

Код

<div class="view">  
  <img src="images/1.jpg" />  
  <div class="mask"></div>
  <div class="content">  
  <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  


А это базовые CSS-стили для всех пяти вариантов, отдельно для каждого эффекта будут дополнительно подключены свои файлы CSS-стилей. При желании, конечно, можно всё объединить в один файл.

Код

.view {
  width: 300px;
  height: 200px;
  margin: 10px;
  float: left;
  border: 5px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 0px 0px 5px #aaa;
  cursor: default;
}

.view .mask, .view .content {
  width: 300px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.view img {
  display: block;
  position: relative;
}

.view a.info {
  background:url(../img/link.png) center no-repeat;
  display: inline-block;
  text-decoration: none;
  padding:0;
  text-indent:-9999px;
  width:20px;
  height:20px;
}


ВАРИАНТ 1

Демо

HTML

Код

<div class="view effect">  
  <img src="images/1.jpg" />  
  <div class="mask"></div>  
  <div class="content">  
  <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  


CSS

Код

.effect img {
  opacity:1;
  transform:scale(1,1);
  transition: all 0.2s ease-in;
}

.effect .mask {
  opacity:0;
  overflow:visible;
  border-color:rgba(0,0,0,0.7) transparent transparent transparent;
  border-style:solid;
  border-width:150px;
  width:0;
  height:0;
  transform:translateY(-125px);
  transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}

.effect a.info {
  opacity:0;
  transform:translateY(-125px);
  transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover img {
  opacity:0.7;
  transform:scale(2,2);
}

.effect:hover .mask {
  opacity: 1;
  transform: translateY(0px);
}

.effect:hover a.info {
  opacity:1;
  transform:translateY(100px);
}


ВАРИАНТ 2

Демо

HTML

Код

<div class="view second-effect">  
  <img src="images/2.jpg" />  
  <div class="mask">  
  <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  


CSS

Код

.second-effect .mask {
  opacity: 0;
  overflow:visible;
  border:0px solid rgba(0,0,0,0.7);
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
}

.second-effect a.info {
  position:relative;
  top:-10px;
  opacity:0;
  transform:scale(0,0);
  transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.second-effect:hover .mask {
  opacity: 1;
  border:100px solid rgba(0,0,0,0.7);
}

.second-effect:hover a.info {
  opacity:1;
  transform:scale(1,1);
  transition-delay:0.3s;
}


ВАРИАНТ 3

Демо

HTML

Код

<div class="view third-effect">  
  <img src="images/3.jpg" />  
  <div class="mask">  
  <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  


CSS

Код

.third-effect .mask {
  opacity: 0;
  overflow:visible;
  border:100px solid rgba(0,0,0,0.7);
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
}

.third-effect a.info {
  position:relative;
  top:-10px; /* Center the link */
  opacity: 0;
  transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover .mask {
  opacity: 1;
  border:100px solid rgba(0,0,0,0.7);
}

.third-effect:hover a.info {
  opacity:1;
  transition-delay: 0.3s;
}


ВАРИАНТ 4

Демо

HTML

Код

<div class="view fourth-effect">  
  <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  
  <div class="mask"></div>  
</div>  


CSS

Код

.fourth-effect .mask {
  position:absolute; /* Center the mask */
  top:50px;
  left:100px;
  cursor:pointer;
  border-radius: 50px;
  border-width: 50px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 50px solid rgba(0, 0, 0, 0.7);
  box-sizing:border-box;
  opacity:1;
  visibility:visible;
  transform:scale(4);
  transition:all 0.3s ease-in-out;
}

.fourth-effect:hover .mask {
  opacity: 0;
  border:0px solid rgba(0,0,0,0.7);
  visibility:hidden;
}


ВАРИАНТ 5

Демо

HTML

Код

<div class="view fifth-effect">  
  <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
  <div class="mask"></div>  
</div>  


CSS

Код

.fifth-effect img {
  opacity:0.2;
  transition: all 0.3s ease-in;
}

.fifth-effect .mask {
  cursor:pointer;
  opacity:1;
  visibility:visible;
  border:100px solid rgba(0,0,0,0.7);
  box-sizing:border-box;
  transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}

.fifth-effect:hover .mask {
  border:0px double rgba(0,0,0,0.7);
  opacity:0;
  visibility:hidden;
}

.fifth-effect:hover img {
  opacity:1;
}
Обсуждение материала:
Комментариев: 0
avatar

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

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

    18.01.2017

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

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

    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