Эффект для изображений создан на 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 - как понимаете, что можно поставить и на другие функций, что демонстрация для этого подготовлена на материал. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
