Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border . Работать такие эффекты будут только в современных, поддерживающих css3 , браузерах.
HTML
Довольно простая структура.
Создаем родительскую оболочку с классом view
и контентом внутри. Затем создаем контейнер с классом mask
, где и будем применять css3
переходы получая эффекты при наведении. В некоторых примерах этот синтаксис немного изменится в зависимости от применяемого эффекта.
CSS
Здесь приведены основные свойства нашего урока. Для каждого эффекта будет свой 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
Добавим класс effect к элементу с классом view для этого эффекта:
CSS
Чтобы уменьшить урок мы опустили в коде префиксы (-moz,-webkit
и др.), но все они есть в css
файлах эффектов.
В дополнении к свойству border
для создания треугольника, мы использовали многократные переходы, что позволило иметь больше контроля над свойствами во время анимации:
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
Синтаксис этого примера несколько отличается, обычно достаточно добавить специальный класс second-effect к элементу с классом view , но тут мы еще добавили ссылку внутри элемента с классом mask :
CSS
В этом примере мы собираемся работать с параметрами свойства border . Также реализовали box-sizing . Свойство box-sizing используется для изменения дефолтной box модели вычисляющей ширину и высоту элементов.
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
Добавим к классу view специальный класс third-effect для этого эффекта:
CSS
Как видно, то всего с помощью нескольких строк кода можно получить хороший эффект благодаря свойству border :
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
Разметка в этом примере короче по сравнению с предыдущими примерами, но получаемый эффект очень внушительный:
CSS
Используя только класс mask в комбинации со свойством border-radius получится довольно красивый эффект. Также использовали свойство visibility , которое позволяет в конце перехода получить кликабельное изображение.
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
В этом последнем примере такой же синтаксис, как и в четвертом, отличия лишь в добавляемом классе fifth-effect вместо fourth-effect:
CSS
Также здесь мы использовали свойство border и visibility . Трюк заключается в изменении свойства border с solid на double :
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; }
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое . Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта на них курсора мыши. Реализованы эти могут как с помощью различных плагинов jQuery, так и на чистом .
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.
Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.
Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
Совсем уж простецкий эффект перехода, без особых наворотов, полностью круглое изображение в рамке, трансформируется меняя фокус при наведении и всё.
Hover-эффекты для миниатюр на CSS3
Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
Вращение миниатюр при наведении
Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.
Если перевести дословно:"Сексуальный эффект при наведении на ". Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.
4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.
Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.
Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.
Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
Различные эффекты анимации рамки вокруг изображений, смотрится довольно привлекательно, имеется подробное руководство по настройке и использованию.
Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.
Раздвижные изображения
Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
6 Подписей к картинкам
6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.
Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.
Об этом способе я рассказывал в одном из предыдущих своих уроков: .
Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с . Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.
С Уважением, Андрей
Структура разметки весьма проста и интуитивна. Создаем контейнер, который будет содержать изображение и всю остальную информацию.
Внутри элемента view содержится элемент с классом mask , который реализует наш эффект с использованием CSS3. В элементе с классом mask содержится заголовок, описание и ссылка (Для некоторых примеров элемент с классом mask используется отдельно, а содержание помещается в контейнер с классом content ).
Заголовок
Текст сообщения
КнопкаCSS
После создания разметки зададим стили. Для нашего набора эффектов будет использоваться класс с общими правилами, а специфические свойства будут добавляться для каждого примера в виде отдельных классов. В тексте урока префиксы производителей браузеров будут опущены для большей наглядности.
View { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 }
А теперь представим 10 эффектов. Открывайте демонстрационную страницу в отдельном окне или вкладке, смотрите и изучайте код.
Пример 1
Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).
В данном примере будут использоваться базовые переходы для создания отличного эффекта.
View-first img { transition: all 0.2s linear; } .view-first .mask { opacity: 0; background-color: rgba(219,127,8, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out; }
А теперь перейдем к основе нашего эффекта. Когда курсор мыши проходит над изображением мы используем задержку для имитации простой анимации. Свойство transition-delay , которое используется в псевдо-классах hover , может вносить изменения для отличия от обычного класса. В данном примере мы не используем задержки в обычном классе, но в псевдо-классах hover запуск переходов немного задерживается. Когда курсор мыши покидает объект, будет использоваться значение по умолчанию 0s, и "восстановление" произойдет быстро.
View-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; }
Пример 2
Во втором примере мы добавляем специальный класс view-second , но элемент с классом mask будет пустым, а содержание будет помещено в элемент с классом content .
Стиль #2
Описание
КнопкаЗдесь класс mask имеет другие атрибуты для построения эффекта. Мы собираемся использовать свойства трансформации (translate и rotate ):
View-second img { transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(115,146,184, 0.7); width: 300px; padding: 60px; height: 300px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: translate(200px, -200px); transition: all 0.2s ease-in-out; } .view-second p { transform: translate(-200px, 200px); transition: all 0.2s ease-in-out; } .view-second a.info { transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; }
Для нашего эффекта будет использоваться трансформация translate для перемещения элементов на место. А маска будет также вращаться. Элементы описания будут появляться с небольшой задержкой друг за другом.
View-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2 { transform: translate(0px,0px); transition-delay: 0.3s; } .view-second:hover p { transform: translate(0px,0px); transition-delay: 0.4s; } .view-second:hover a.info { transform: translate(0px,0px); transition-delay: 0.5s; }
Пример 3
В третьем примере мы будем использовать трансформации translate и rotate для вывода наших элементов описания:
View-third img { transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); opacity: 0; transform: translate(460px, -100px) rotate(180deg); transition: all 0.2s 0.4s ease-in-out; } .view-third h2{ transform: translateY(-100px); transition: all 0.2s ease-in-out; } .view-third p { transform: translateX(300px) rotate(90deg); transition: all 0.2s ease-in-out; } .view-third a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }
Достаточно простые инструкции для получения эффекта.
View-third:hover .mask { opacity:1; transition-delay: 0s; transform: translate(0px, 0px); } .view-third:hover h2 { transform: translateY(0px); transition-delay: 0.5s; } .view-third:hover p { transform: translateX(0px) rotate(0deg); transition-delay: 0.4s; } .view-third:hover a.info { transform: translateY(0px); transition-delay: 0.3s; }
Пример 4
В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale . Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка.
View-fourth img { transition: all 0.4s ease-in-out 0.2s; opacity: 1; } .view-fourth .mask { background-color: rgba(0,0,0,0.8); opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.4s ease-in; border-radius: 0px; } .view-fourth h2{ opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transition: all 0.5s ease-in-out; } .view-fourth p { opacity: 0; transition: all 0.5s ease-in-out; } .view-fourth a.info { opacity: 0; transition: all 0.5s ease-in-out; }
Простые инструкции для получения эффекта. CSS3 может все.
View-fourth:hover .mask { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.2s; } .view-fourth:hover img { transform: scale(0); opacity: 0; transition-delay: 0s; } .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info{ opacity: 1; transition-delay: 0.5s; }
Пример 5
В пятом примере содержание будет выскальзывать слева благодаря использованию свойства translate в сочетании с функцией перехода ease-in-out .
View-fifth img { transition: all 0.3s ease-in-out; } .view-fifth .mask { background-color: rgba(146,96,91,0.3); transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; } .view-fifth h2{ background: rgba(255, 255, 255, 0.5); color: #000; box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); } .view-fifth p{ opacity: 0; color: #333; transition: all 0.2s linear; }
При наведении курсора мыши изображение выскальзывает вправо, и на его место слева выдвигается описание, как бы сдвигая картинку:
View-fifth:hover .mask { transform: translateX(0px); } .view-fifth:hover img { transform: translateX(300px); transition-delay: 0.1s; } .view-fifth:hover p{ opacity: 1; transition-delay: 0.4s; }
Пример 6
В данном примере мы содержание будет "падать" с переднего плана, уменьшая масштаб от 10 до 1 (нормального размера). А кнопка будет выскальзывать снизу.
View-sixth img { transition: all 0.4s ease-in-out 0.5s; } .view-sixth .mask{ background-color: rgba(146,96,91,0.5); opacity:0; transition: all 0.3s ease-in 0.4s; } .view-sixth h2{ opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(10); transition: all 0.3s ease-in-out 0.1s; } .view-sixth p { opacity:0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } .view-sixth a.info { opacity:0; transform: translateY(100px); transition: all 0.3s ease-in-out 0.1s; }
Обратная трансформация также выполняется плавно:
View-sixth:hover .mask { opacity:1; transition-delay: 0s; } .view-sixth:hover img { transition-delay: 0s; } .view-sixth:hover h2 { opacity: 1; transform: scale(1); transition-delay: 0.1s; } .view-sixth:hover p { opacity:1; transform: scale(1); transition-delay: 0.2s; } .view-sixth:hover a.info { opacity:1; transform: translateY(0px); transition-delay: 0.3s; }
Пример 7
В седьмом эффекте идея заключается в использовании вращения изображения вокруг центра и одновременного уменьшения его масштаба. А описание затем опускается сверху.
View-seventh img{ transition: all 0.5s ease-out; opacity: 1; } .view-seventh .mask { background-color: rgba(77,44,35,0.5); transform: rotate(0deg) scale(1); opacity: 0; transition: all 0.3s ease-out; transform: translateY(-200px) rotate(180deg); } .view-seventh h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh p { transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }
При наведении курсора мыши элементы описания появляются с задержкой:
View-seventh:hover img{ transform: rotate(720deg) scale(0); opacity: 0; } .view-seventh:hover .mask { opacity: 1; transform: translateY(0px) rotate(0deg); transition-delay: 0.4s; } .view-seventh:hover h2 { transform: translateY(0px); transition-delay: 0.7s; } .view-seventh:hover p { transform: translateY(0px); transition-delay: 0.6s; } .view-seventh:hover a.info { transform: translateY(0px); transition-delay: 0.5s; }
Пример 8
В данном примере создается эффект отскока при опускании элементов описания сверху.
View-eighth .mask { background-color: rgba(255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s ease-out 0.5s; } .view-eighth h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out 0.1s; } .view-eighth p { color: #333; transform: translateY(-200px); transition: all 0.2s ease-in-out 0.2s; } .view-eighth a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out 0.3s; }
Мы добавляем анимацию к элементу mask и определяем задержи для элеменетов описания:
View-eighth:hover .mask { opacity: 1; top: 0px; transition-delay: 0s; animation: bounceY 0.9s linear; } .view-eighth:hover h2 { transform: translateY(0px); transition-delay: 0.4s; } .view-eighth:hover p { transform: translateY(0px); transition-delay: 0.2s; } .view-eighth:hover a.info { transform: translateY(0px); transition-delay: 0s; }
Для создания эффекта отскока используется функция translateY и несколько фреймов:
@keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} }
Пример 9
В данном примере мы используем два элемента маски для создания эффекта закрывающихся штор:
Стиль #9
Описаниеt
КнопкаДве маски имеют различные параметры для трансформаций. Также они выравнены по-разному.
View-ninth .mask-1, .view-ninth .mask-2{ background-color: rgba(0,0,0,0.5); height: 361px; width: 361px; background: rgba(119,0,36,0.5); opacity: 1; transition: all 0.3s ease-in-out 0.6s; } .view-ninth .mask-1 { left: auto; right: 0px; transform: rotate(56.5deg) translateX(-180px); transform-origin: 100% 0%; } .view-ninth .mask-2 { top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; }
View-ninth .content{ background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px,166px); transform-origin: 0% 100%; transition: all 0.4s ease-in-out 0.3s; } .view-ninth h2{ background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255,255,255,0.2); } .view-ninth a.info{ display: none; }
При наведении курсора мыши появляется содержание из границы соприкосновения масок:
View-ninth:hover .content{ height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotate(0deg) translate(0px,0px); } .view-ninth:hover .mask-1, .view-ninth:hover .mask-2{ transition-delay: 0s; } .view-ninth:hover .mask-1{ transform: rotate(56.5deg) translateX(1px); } .view-ninth:hover .mask-2 { transform: rotate(56.5deg) translateX(-1px); }
Для масок используется свойство transition-delay , поэтому при наведении курсора мыши трансформации начинаются немедленно. Но обратная трансформация осуществляется с задержкой, чтобы содержание успело свернуться.
Пример 10
В последнем пример используется увеличение изображения с одновременным изменением прозрачности, а содержание увеличивается до нормальных размеров.
View-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2{ border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; }
При наведении курсора просто изменяется масштаб изображения и прозрачность:
View-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info{ transform: scale(1); opacity: 1; }
Заключение
CSS3 имеет огромный потенциал для создания различных визуальных эффектов. Вероятно, что вскоре мы сможем отказаться от использования JavaScript для простых эффектов.
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.
Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.
Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
Совсем уж простецкий эффект перехода, без особых наворотов, полностью круглое изображение в рамке, трансформируется меняя фокус при наведении и всё.
Hover-эффекты для миниатюр на CSS3
Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
Вращение миниатюр при наведении
Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.
Если перевести дословно:”Сексуальный эффект при наведении на изображения”. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.
4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.
Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.
Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.
Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
Border Animation Effect
Различные эффекты анимации рамки вокруг изображений, смотрится довольно привлекательно, имеется подробное руководство по настройке и использованию.
Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.
Раздвижные изображения
Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.
6 Подписей к картинкам
6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.
How to create some subtle and modern caption hover effects.
Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.
Direction aware CSS3 Hover Effect with jQuery
Create a direction-aware hover effect using CSS3 and jQuery.
Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.
Circle Hover Effects with CSS Transitions
A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations
This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.
Icon Hover Effects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Here’s a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.
- Перевод
Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.
Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
HTML-разметка
Структура разметки очень простая и интуитивно понятная. Создайте контейнер, который будет содержать изображение и любую другую информацию, такую как заголовок, описание и прочее.Внутри блока с классом view вставим элемент с классом mask, который будет отвечать за наши эффекты CSS3, внутри него мы и поместим название, описание и ссылку на полное изображение. (Для некоторых примеров, нам нужно будет добавить mask как отдельный элемент и обернуть описание в div с классом content.)
Title
Read MoreCSS
После создания разметки мы создадим наши стили.Мы установим общие правила для наших стилей, а затем мы будем добавлять специальные классы с желаемыми эффектами. В статье мы будем опускать CSS-префиксы для различных браузеров, но вы их можете увидеть в исходниках.
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
А теперь мы рассмотрим десять эффектов.
Пример 1
Добавим специальный класс view-first в элемент с классом view для этого эффекта. Мы будем добавлять специальный класс для каждого экземпляра view элемента (view-first, view-second, view-third, и т.д.).
В первом примере мы будем использовать только некоторые базовые переходы, чтобы создать неплохой эффект при наведении курсора:
.view-first img { transition: all 0.2s linear; } .view-first .mask { opacity: 0; background-color: rgba(219,127,8, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out; }
А теперь самое интересное в нашем эффекте. Когда мы перемещаем курсор над изображением, можно использовать свойство delay чтобы имитировать простую анимацию. transition-delay, который мы используем при наведении может быть изменен, чтобы отличаться от обычного класса. В этом примере мы не использовали какой-либо задержки в обычном классе, но мы добавили delay в hover, который будет немного задерживать эффект перехода.
.view-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; }
Пример 2
Во втором примере мы добавим специальный класс view-second, но мы оставим элемент с классом mask пустым и обернем описание в div с классом content.
Hover Style #2
Some description
Read MoreЗдесь класс mask будет иметь различные атрибуты, в частности мы собираемся применить свойство transform (translate и rotate). Описание элементов будут перемещены так, чтобы мы могли сдвинуть их вместе при наведении:
.view-second img { transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(115,146,184, 0.7); width: 300px; padding: 60px; height: 300px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: translate(200px, -200px); transition: all 0.2s ease-in-out; } .view-second p { transform: translate(-200px, 200px); transition: all 0.2s ease-in-out; } .view-second a.info { transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; }
Для нашего hover-эффекта мы используем translate-преобразование для того, чтобы перемещать наши элементы на место. mask также будет поворачиваться. Элементы описания будут двигаться с небольшой задержкой:
.view-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2 { transform: translate(0px,0px); transition-delay: 0.3s; } .view-second:hover p { transform: translate(0px,0px); transition-delay: 0.4s; } .view-second:hover a.info { transform: translate(0px,0px); transition-delay: 0.5s; }
Пример 3
В третьем примере мы будем использовать translate и rotate преобразование:
.view-third img {
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: translate(460px, -100px) rotate(180deg);
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
transform: translateY(-100px);
transition: all 0.2s ease-in-out;
}
.view-third p {
transform: translateX(300px) rotate(90deg);
transition: all 0.2s ease-in-out;
}
.view-third a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
Это простые инструкции, которые будут применяться при наведении. Теперь мы будем переворачивать описание элементов, установив transition-delay соответственно:
.view-third:hover .mask {
opacity:1;
transition-delay: 0s;
transform: translate(0px, 0px);
}
.view-third:hover h2 {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-third:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-third:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}
Пример 4
В четвертом примере мы выполним простое уменьшение изображения и увеличение нашего контента с вращением, все это благодаря scale преобразованию. Мы установим transition-delay равным 0,2 для стилей изображения, но при наведении мы изменим его на 0s. Это позволит начать анимацию немедленно при наведении мыши, но задержать её когда курсор уходит.
.view-fourth img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.view-fourth .mask {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.4s ease-in;
border-radius: 0px;
}
.view-fourth h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.view-fourth p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
opacity: 0;
transition: all 0.5s ease-in-out;
}
Это инструкции, чтобы получить этот эффект - с CSS3 можно делать все:).
.view-fourth:hover .mask {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s;
}
.view-fourth:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
opacity: 1;
transition-delay: 0.5s;
}
Пример 5
В этом пятом примере мы будем использовать свойство translate наряду с transition-timing-function ease-in-out для того, чтобы сдвинуть контент с левой стороны.
.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
Эффект при наведении будет сдвигать изображение вправо и описание появится с левой стороны, как если бы оно сдвинуло картинку:
.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}
Пример 6
В этом примере мы сделаем описание появляющееся спереди, уменьшим изображение до исходного размера (scale c 10 до 1). Кнопка «read more» будет появляться снизу (translate).
.view-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
background-color: rgba(146,96,91,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
opacity:0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
opacity:0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}
Обратный переход будет задержан таким образом, чтобы он выглядел гладким:
.view-sixth:hover .mask {
opacity:1;
transition-delay: 0s;
}
.view-sixth:hover img {
transition-delay: 0s;
}
.view-sixth:hover h2 {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.view-sixth:hover p {
opacity:1;
transform: scale(1);
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
opacity:1;
transform: translateY(0px);
transition-delay: 0.3s;
}
Пример 7
В седьмом примере идея в том, чтобы повернуть изображение в центре и переместить его вдаль. Затем появится описание, пряча за собой вращающиеся изображение.
.view-seventh img{
transition: all 0.5s ease-out;
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
opacity: 0;
transition: all 0.3s ease-out;
transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
При наведении мы добавим задержку для элементов с описанием. Это позволит нам видеть вращающиеся изображение, прежде чем описание скроет картинку. В обратном переходе все исчезнет сразу же, и мы увидим изображение вращающееся в обратном направлении:
.view-seventh:hover img{
transform: rotate(720deg) scale(0);
opacity: 0;
}
.view-seventh:hover .mask {
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}
Пример 8
В восьмом примере мы будем использовать анимацию и воссоздадим эффект отскока. Описание будет спускаться снизу и отскакивать от нижней границы.
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}
Мы добавим анимацию для элемента mask и определим некоторые установки задержки для элементов описания:
.view-eighth:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}
Чтобы воссоздать настоящий эффект отскока мы воспользуемся translateY, как вы можете видеть там несколько кадров, которые создают этот эффект:
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
Пример 9
В этом примере мы будем использовать два элемента mask, чтобы сдвигать их с правого нижнего и с левого верхнего углов:
Hover Style #9
Read MoreЭлементы mask будут иметь различные значения translation и transfrom-origin. А также мы укажем что один выровнен по верхней границе, а другой по нижней:
.view-ninth .mask-1,.view-ninth .mask-2{ background-color: rgba(0,0,0,0.5); height: 361px; width: 361px; background: rgba(119,0,36,0.5); opacity: 1; transition: all 0.3s ease-in-out 0.6s; } .view-ninth .mask-1 { left: auto; right: 0px; transform: rotate(56.5deg) translateX(-180px); transform-origin: 100% 0%; } .view-ninth .mask-2 { top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; } .view-ninth .content{ background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px,166px); transform-origin: 0% 100%; transition: all 0.4s ease-in-out 0.3s; } .view-ninth h2{ background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255,255,255,0.2); } .view-ninth a.info{ display: none; }
При наведении, мы сделаем так, что содержание будет появляться как бы из под двух, съезжающих в центр, элементов mask:
.view-ninth:hover .content{ height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotate(0deg) translate(0px,0px); } .view-ninth:hover .mask-1, .view-ninth:hover .mask-2{ transition-delay: 0s; } .view-ninth:hover .mask-1{ transform: rotate(56.5deg) translateX(1px); } .view-ninth:hover .mask-2 { transform: rotate(56.5deg) translateX(-1px); }
Мы настроили transition-delay для элементов mask таким образом, что, когда мы наводим курсор, переход происходит мгновенно, но при уходе мыши, задержка будет больше.
Пример 10
В последнем примере, мы будем увеличивать изображение, а затем прятать, перенося описание на передний план. Мы можем сделать это, используя шкалу преобразования (scale transform) и настраивая уровень прозрачности:
.view-tenth img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth h2{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth p {
color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
При наведении мы просто масштабируем изображение, а зачем прячем его, уменьшив его прозрачность до 0:
.view-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.view-tenth:hover .mask {
opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}
Заключение
CSS3 имеет действительно большой потенциал для создания красивых эффектов. Вскоре, надеюсь, мы будет в состоянии избегать использование JavaScript для создания простых эффектов и полагаться на 100% на CSS, во всех браузерах.Я надеюсь, что вам понравились эти эксперименты, но прежде всего я надеюсь, что они смогут вдохновить вас на создание своих эффектов.
P.S. Данная статья является логическим продолжением статьи от Mary Lou
Теги: Добавить метки
