Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим несколько примеров, в котором создадим 10 разных эффектов при наведении курсора мыши на изображение. Мы будем показывать поверх изображения описание. Следует учесть, что данный эффект будет работать только в современных браузерах, которые поддерживают нововведения CSS3.
[adsense]
Разметка
Структура HTML как всегда проста и прозрачна. Создадим контейнер, который будет содержать наше изображение и всю необходимую информацию. Внутрь элемента view
вставим блок mask
, который будет отвечать за наши эффекты; внутрь этого блока мы добавим заголовок, описание и ссылку на полноразмерное изображение. (В некоторых примерах мы будем использовать блок mask
как отдельный элемент, а описание вынесем в отдельный элемент content
).
Title
Your Text
Read More
Стили CSS
После создания разметки, нам потребуется задать основные стили. Мы зададим основные стили для нашего класса, а позже будем добавлять стили для каждого определенного примера. В листинге я не буду использовать браузерные префиксы для CSS3 свойств, дабы сократить код.
.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-first, view-second, view-third и т.д.).
В первом примере мы будем использовать простые эффекты на основе свойства transition.
.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 для того, чтобы создать ощущение задержки и анимацию.
.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
, но мы оставим блок view
пустым, а описание вынесем в отдельный блок content
.
Hover Style #2
Some description
Read More
Здесь блок mask
будет иметь совсем другие атрибуты для того чтобы создать необходимый нам эффект. Мы применим свойство transform (translate и rotate) и сделаем из блока прямоугольник. Элементы описания будут так же подвержены действию эффекта translate и мы сможем создать эффект их вылета.
.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 чтобы наши элементы вернулись в исходное состояние. Элемент 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
Посмотреть демо
В этом примере мы будем уменьшать само изображение и увеличивать описание с вращением. Делать мы будем это с помощью transform: scale. Добавим задержку и получим вот такой код:
.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;
}
А вот простой код для самого эффекта:
.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
Посмотреть демо
В пятом примере мы будем использовать свойство CSS translate и применим к transition эффект easy-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). Кнопка «Далее» будет появляться снизу (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:
@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
Some Text
Read More
Соответственно каждый из элементов mask
будет иметь разные параметры вращения:
.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%;
}
Контент же будет появляться как бы из щели посередине, которая образуется в результате объединения двух элементов mask
:
.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);
}
Обратите внимание, что при появлении описания у нас нет задержки, а вот при исчезновении описания, элементы mask
«ждут» пока описание исчезнет в центре.
Пример 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;
}
При наведении курсора мы просто увеличиваем изображение и выставляем свойство opacity в 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 в пользу CSS3 для создания простых эффектов и это будет работать во всех браузерах. Надеюсь вам понравились эти эксперименты. Обязательно загляните сюда — там еще несколько интересных эффектов при наведении.
Посмотреть демо
Если вы хотите заняться продажей хостинга, то один из вариантов это ресселинг хостинг. Обратите внимание на реселлерcкий хостинг от компании PLASMA, которая предлагает массу различных тарифных планов.
а почему никогда нет ссылки на источник статьи?
как то не красиво выдавать чужую статью за свою
источник не могу указать т.к. ГГЛ не позволяет) в остальном, статью не выдаю за свою. Эта статья всего лишь перевод, как и множество статей на этом блоге.
Источник им подавай. Побольше бы таких статей полезных. А источник если не наш, то пох на него. Это когда чужие с рунета тыришь не хорошо. И ссылки ставить надо по понятиям. А америкосы пусть курят бамбук.
10 — самый рульный
Не пойму. Все сделал в точности как у вас. Проверил во всех браузерах — эффекта нет.. подскажите, плз, почему? Браузеры последних версий.
Проблема: при наведении просто в один миг меняется фон без эффектов.
Разобрался… Вы если выкладываете, сами проверяйе хотя бы, что делайте. Лишь бы бабло за ссылку получить…
Внимание!!! Чтобы были эффекты надо смотреть не коды на этой странице, а сделать анализ html в примере, там найти соотвествующий style.css и уже в нем нормальный css код!
какой конкретно пример, и где ошибка, подскажите пожалуйста
Здравствуйте!Огромное спасибо Вашему сайту!
Сделал по описанию 10 пример, ничего не получилось. Скачал Ваши стили. Код там такой:
.view-tenth img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}.view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»; filter: alpha(opacity=0); opacity: 0;}.view-tenth h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»; filter: alpha(opacity=0); opacity: 0;}.view-tenth p { color: #333; -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}.view-tenth a.info { -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}.view-tenth:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»; filter: alpha(opacity=0); opacity: 0;}.view-tenth:hover .mask { -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=100)»; filter: alpha(opacity=100); opacity: 1;}.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=100)»; filter: alpha(opacity=100); opacity: 1;}.view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; 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; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000;}.view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000;}Сейчас я еще в нем разбираюсь, но с ним по крайней мере работает.
У меня почему то ничего не работает((
нече так 🙂
а это для dle 9.7 пойдет?
Не работают демки — а на этой странице не работают некоторые коды, поэтому не могу поставить себе на сайт.
а ОЧЕНЬ хочется!
Админчик, помоги! Исправь пожалуйста неработающие ссылки!