ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект для изображений создан на CSS3

Эффект для изображений создан на CSS3

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

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

Каркас HTML:

Код

<ul class="zornet effect">
  <li>
  <h2>ZORNET.RU - Скрипты uCoz</h2>
  <p>Здесь пишем краткое описание под конкретный материал, которое можно выставить на 120 и более знаков</p>
  </li>

  <li><img class="top" src="http://zornet.ru/zorner_ru_1/Abter/der/ps7biYq6Q_Ocoj6Y83bumw.png" alt=""></li>
  </ul>

CSS:

Код

.zornet {
  position:relative;
  width:300px;
  height:200px;
  overflow:hidden;
  float:left;
  margin-right:20px;
  background-color:rgba(26,76,110,0.5)
}

.zornet p,.zornet h2 {
  color:#fff;
  padding:10px;
  left:-20px;
  top:20px;
  position:relative
}

.zornet p {
  font-family:'Lato';
  font-size:12px;
  line-height:18px;
  margin:0
}

.zornet 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
}

PS - как понимаете, что можно поставить и на другие функций, что демонстрация для этого подготовлена на материал.

08 Июля 2017 Просмотров: 1832 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 4
Порядок вывода комментариев: Kolinkor 12 Июля 2017 02:00¹ 0 Кто то такой эффект на колонку вид материала поставил, немного изменен, видел его, они в 3 разных видах идут. Kosten 12 Июля 2017 02:33² 0 Возможно позже размещу, здесь нужно обязательно, так думаю, демонстрацию на материал делать. Kolinkor 13 Июля 2017 04:54³ 0 Так можно все было сделать в одном материале, и есть DEMO на все 3 эпизожа, как они по эффекту работают. Kosten 13 Июля 2017 07:02⁴ 0 По мне лучше делать по одному, чтоб для пользователя понятнее было, а DEMO не проблема сделать, если материал рабочий и есть желание, это главнее.