Май 7, 2020 Запись была обновлена

Время чтения: 6 мин.

Потрясающие эффекты CSS3 при наведении

В этом уроке мы создадим 7 видов эффектов CSS при наведении курсора мыши на ссылку или изображение. Сейчас мы может делать круглые формы изображений и блоков с помощью свойства border-radius, не используя при этом изображения. Но куда более интересным становится интерактивное изображение или ссылка, которая изменяется при наведении. Стандартное изменение цвета в CSS ссылки при наведении очень банально. Поэтому сегодня мы рассмотрим действительно необычные эффекты.

Пример можно увидеть здесь:

Посмотреть пример Скачать

Потрясающие эффекты CSS3 при наведении курсора

В демо есть 7 примеров с разными эффектами. Будем рассматривать их по порядку.

Пример 1

CSS3 эффект: появление внутреннего круга

HTML часть

Структура HTML в данном случае выглядит следующим образом:

<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item ch-img-1">
                <div class="ch-info">
                    <h3>Текст 1</h3>
                </div>
            </div>
        </li>
        ...
    </ul>
</section>

CSS часть

А эффект — это появление внутреннего круга с текстом и прозрачным фоном. Для него будут следующие стили:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    opacity: 0;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
 
    -webkit-backface-visibility: hidden;
}
 
.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

Пример 2

HTML часть

Структура HTML точно такая же как и в первом примере.

CSS часть

А вот CSS отличается, так как здесь другой эффект(круг закрашивается снаружи), также используем другие изображения:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
.ch-item:hover {
    box-shadow: 
        inset 0 0 0 110px rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.1);
}

Пример 3

HTML часть

В данном случае структура несколько иная, потому что у нас есть две части формы: та что мы видим изначально, и та, которая показывается при наведении:

<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h3>Текст</h3>
                </div>
                <div class="ch-thumb ch-img-1"></div>
            </div>
        </li>
        ...
    </ul>
</section>

CSS часть

Эффект здесь также интересный: изображение как бы прибито гвоздиком, и при наведении съезжает вниз одна часть:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

Пример 4

HTML часть

Как и в предыдущем примере здесь есть две части формы: видимая и невидимая. Поэтому HTML структура очень похожа:

<section class="main">
    <ul class="ch-grid">
        <li>
            <div class="ch-item ch-img-1">				
                <div class="ch-info-wrap">
                    <div class="ch-info">
                        <div class="ch-info-front ch-img-1"></div>
                        <div class="ch-info-back">
                            <h3>Текст 1</h3>
                        </div>	
                    </div>
                </div>
            </div>
        </li>
        ...
    </ul>
</section>

CSS часть

Очень красивый эффект поворота внутренней части:

.ch-info-wrap {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        0 0 0 20px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-info {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
 
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
 
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
 
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
.ch-info .ch-info-back {
    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}
 
.ch-item:hover .ch-info-wrap {
    box-shadow: 
        0 0 0 0 rgba(255,255,255,0.8), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-item:hover .ch-info {
    -webkit-transform: rotate3d(0,1,0,-180deg);
    -moz-transform: rotate3d(0,1,0,-180deg);
    -o-transform: rotate3d(0,1,0,-180deg);
    -ms-transform: rotate3d(0,1,0,-180deg);
    transform: rotate3d(0,1,0,-180deg);
}

Пример 5

CSS3 эффект: уменьшение и замена внутреннего круга

HTML часть

Структура точно такая же, как в прошлом примере, здесь также есть видимая и невидимая часть формы.

CSS часть

Суть эффекта состоит в следующем: внутренний круг уменьшается и заменяется содержимым с текстом:

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        0 0 0 20px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-backface-visibility: hidden;
}
 
.ch-info .ch-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
 
.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
} 
 
.ch-item:hover .ch-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

Пример 6

HTML часть

В HTML всё точно также, как и в прошлых двух примерах, поэтому ничего не меняем.

CSS часть

При наведении на данный блок, видимая часть смещается вниз и мы видим текст, который находится за видимой частью:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
 
.ch-info .ch-info-front {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
 
    z-index: 100;
    box-shadow: 
        inset 2px 1px 4px rgba(0,0,0,0.1);
}
 
.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: rotate3d(1,0,0,-180deg);
    -moz-transform: rotate3d(1,0,0,-180deg);
    -o-transform: rotate3d(1,0,0,-180deg);
    -ms-transform: rotate3d(1,0,0,-180deg);
    transform: rotate3d(1,0,0,-180deg);
 
    box-shadow: 
        inset 0 0 5px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(0,0,0,0.3);
}
 
.ch-item:hover .ch-info-back {
    background: rgba(230,132,107,0.6);
}

Пример 7

HTML часть

Здесь опять же ничего не меняем, оставляем как в прошлом примере.

CSS часть

В этом примере используется 3D преобразование и смотрится оно очень красиво:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;
}
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
 
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
 
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
 
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}
 
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

Вывод

Мы рассмотрели 7 очень красивых и оригинальных эффектов, которые можно использовать на своём сайте. Я очень редко встречаю подобные вещи на сайтах. Они придадут вашему сайту оригинальность и неповторимость, но только не переборщите с ними, чтобы все эти преобразования не мешали посетителям просматривать ваш сайт.

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

Юрий Немец

Создатель проекта "sitehere.ru". Сооснователь компании "Exore". В интернет-маркетинге с 2013 года. Специализируется на контент-маркетинге и SEO. Автор мини-книги "Как раскрутить сайт с нуля до 32 000 посетителей в месяц".

Личный telegram-канал о digital-маркетинге для руководителей.

68 комментариев к записи

Ajax

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

Ответить
- Юрий
  
  А мне больше всего понравился 5-й 🙂 . Но и первый ничего)
  
  Ответить
  - Антон
    
    Мне тоже больше всего пятый понравился
    
    Ответить
Саматакая

Огромное спасибо 😎

Ответить
Александр

Шикарные примеры! Даже Explorer11 их нормально отображает Надо будет взять на вооружение. Спасибо.

Ответить
Елена

Здравствуйте, Юрий! Получаю на свою почту Ваши новые посты и с интересом всегда их читаю, пока читаю. Всё не решаюсь что-либо применить у себя на сайте, т.к. чувствую себя пока не уверенно с HTML и CSS. У меня к Вам вопрос: в какое месте нужно размещать предложенные вами исходники? Можно ли использовать картинку, как ссылку, если на её наведешь и человека перенаправит туда, куда именно я укажу. Спасибо!

Ответить
- Юрий
  
  Здравствуйте, Елена! Не бойтесь что-то сделать не так, всегда можно всё исправить! Вы используете WordPress?
  
  Ответить
Елена

Да, Юрий,я использую WordPress.

Ответить
- Юрий
  
  По шагам:
  1. Скачайте исходники и откройте тот, который вам больше всего понравился. Скопируйте структуру нужного элемента и вставьте его себе на сайт.
  
  2. Затем откройте соответствующий файл стилей. Он подключен между тегами head. Скопируйте из его все стили и вставьте в конец вашего файла style.css(он находится в папке с активной темой).
  
  3. Скопируйте необходимые изображения и вставьте в папку images(которая находится в папке вашей темы).
  
  Если у вас что-то не получается или вы не уверены, то напишите мне на почту: nemetsyuriy@gmail.com
  
  Ответить
  - артем
    
    вы пишете в пункте 1: «…скопируйте структуру нужного элемента и вставьте его себе на сайт.». нельзя ли подробнее, куда именно прописывать этот код? и второй вопрос: где прописывать url изображений?
    
    Ответить
    - Юрий
      
      Здравствуйте, Артем! Код HTML вы вставляете к нужное место, где хотите видеть эту кнопку(в код шаблона вашего сайта). А url прописываются в файле стилей.
      
      Ответить
      - артем
        
        эффекты, конечно, интересные, но, думаю, под силу их применить только программисту. такому нубу, как я необходима более подробная инструкция по полочкам и со стрелочками. спасибо.
        
        Ответить
        
        Юрий
        
        Артем, напишите мне на почту: nemetsyuriy@gmail.com и я вам помогу сделать, если не получается 🙂
        
        Ответить
        
        артем
        
        ок, большое спасибо!
        
        Ответить
Елена

Спасибо большое, Юрий за помощь! Я обязательно напишу, что у меня получилось на сайте.

Ответить
Slader

Здравствуйте! Читаю автора блога почти полгода, и не успеваю удивляться его щедрости в публикации очень полезных вещей! Эффекты обалденные, и однозначно благодарить за них будут очень многие! Я сам безмерно благодарен! Подскажите пожалуйста один нюанс, как быть если картинки будут не круглые, а например прямоугольные? Хочу применить этот эффект для баннеров внутри сайта.

Ответить
- Юрий
  
  Спасибо, что читаете мои статьи, очень приянто) На самом деле изображения и есть прямоугольные, но из-за того что свойство border-radius: 50% невидимая часть отсекается.
  
  Ответить
  - Slader
    
    Огромное спасибо! Буду осваивать! Если получится что-нибудь путное, обязательно похвастаюсь. Успехов Вам и удачи!
    
    Ответить
Валентина Александровна

Юра здравствуйте, скажите пожалуйста а вообще для чего эти кнопочки? Мне они очень понравились, но можно ли менять текст и картинку на свой сайт. И хотелось бы дизайн под мой сайт. Спасибо. ❗

Ответить
- Юрий
  
  Здравствуйте, Валентина! Эти кнопки можно использовать как обычные ссылки или как способ показать какую-нибудь дополнительную информацию (при наведении они показывают какой-нибудь текст). Картинку и текст конечно можно изменять как вам этого хочется 🙂 .
  
  Ответить
aleks

Спасибо за эффекты!
Только вот №4 в IE не заработал, точнее заработал но не так как должен 🙂 ,
есть ли шанс поправить?

Ответить
- Юрий
  
  А в какую версию IE вы используете?
  
  Ответить
  - aleks
    
    версия 11.0.9600.17280 установил сегодня, до этого был ie10, ничего не изменилось,
    при этом все остальные демо отлично работают, кроме №4
    
    Ответить
Гулин Антон

Крутяк
Но что то номер 5 у меня заглючил …

http://youtu.be/JImtKpznJUc

Ответить
- Юрий
  
  Антон, а какая у Вас версия браузера?
  
  Ответить
  - Гулин Антон
    
    Firefox 34.0, Ubuntu, Linux
    
    Ответить
Артем

Очень хорошие эффекты, а вот описано лениво….
В 7-м примере нет свойства изображения

Ответить
HazyaevNet

Привет! Подключил все замечательно понравился 3 вариант, рыскав в коде не понял одного зачем мы используем класс «main» если он в стилях не указан?

Ответить
Алексей

Доброго времени суток. Очень понравились примеры, только не знаю как внести их на сайт под Joomla. 🙁
Если можете, пожалуйста дайте совет, заранее спасибо 😉

Ответить
- Юрий
  
  Здравствуйте, Алексей!
  Вы используете шаблон, у которого есть файл стилей (чаще всего style.css). В нём Вам необходимо разместить только CSS код данных эффектов. А затем Вы можете размещать либо в файлах темы, либо в статьях уже HTML структуру элементов из данной статьи.
  
  Ответить
Михаил1111

Юрий, здравствуйте. Пробовал этот урок и еще некоторые, ничего не получается на моем сайте, может для ucoz сайтов не подходят ваши уроки?

Ответить
- Юрий
  
  Здравствуйте, Михаил!
  
  Уроки подходят для любого сайта и CMS. Главное чтобы у Вас был доступ к теме, а для сайтов на ucoz есть всё необходимое чтобы повторить любой урок на сайте.
  
  Ответить
Александр

Автору огромное спасибо! Всё очень интересно!!! Буду пробовать!!!

Ответить
Александр

В догонку, — а есть видеоурок с этими эффектами?

Ответить
- Юрий
  
  Здравствуйте, Александр!
  
  Видеоурока нет, ведь здесь всё просто — HTML и CSS только. В соответствующие файлы разместить и всё.
  
  Ответить
Artem

Здравствуйте Юрий! Очень понравились данные эффекты. Но есть проблемы с их установкой… Сайт на joomla. Я стили добавил в файл шаблона template.css, создал материал и добавил туда html код из примера 1. Ничего к сожалению не получилось… Помогите пожалуйста. Куда надо картинки вставить?

Ответить
- Юрий
  
  Здравствуйте, Артем!
  
  Проверьте с помощью инспектора кода в своем браузере появились ли стили у необходимых элементов, а затем относительно расположения файла стилей укажите путь к изображениям.
  
  P.S. Если проблема останется, лично смогу помочь на консультации.
  
  Ответить
Вадим

Скачал архив)хочу разместить у себя на сайте попробывать!у меня друпал!можно по подробней что и куда разместить?

Ответить
- Юрий
  
  Вам необходимо разобраться со структурой Вашей темы, потому что именно в файл стилей Вашей темы нужно вставить CSS. А HTML структуру уже сами выбирайте: либо в код шаблона, либо в статью.
  
  Ответить
Алексей

как сделать чтобы круги не перекрывались другими divaми у которыхстоит position:relative;и position:absolute;?

Ответить
- Юрий Немец
  
  Для этого необходимо управлять свойством z-index.
  
  Ответить
Юрий

Шикарно !!!!! Спасибо за такую информацию. Но не смог найти где " Сейчас мы может делать круглые формы изображений и блоков с помощью свойства border-radius"

Подскажите ,где с этим ознакомится

Ответить
- Юрий Немец
  Здравствуйте, Юрий!
  
  Я имел в виду, что можно делать круглые формы изображений или блоков лишь прописав им в CSS:
  
  .image_class { border-radius:50%; }
  Ответить
  - Юрий
    
    Спасибо за ответ
    
    Ответить
Андрей

Все здорово. Только куда этот код надо конкретно вставлять чтобы работали именно нужные иконки а не усе подряд? Во ту меня нет знания GSS, я понимаю что если я скопирую код понравившегося мне эффекта, то куда его вставить на сайт под GMS Joomla, я не знаю, чтобы это работало. Буду признателен если подскажете.

Ответить
- Юрий Немец
  
  Здравствуйте, Андрей. HTML необходимо вставить в статью (в HTML редакторе), а CSS в Ваш файл стилей (то есть файл стилей Вашей темы, чаще всего это style.css).
  
  Ответить
Андрей

Юрий спасибо за ответ, есть еще вопрос, а в файл style.gss куда именно поставить надо? В начало, вконец? или как то иначе?

Ответить
- Юрий Немец
  Лучше всего в самый конец и перед этим поставить комментарий, чтобы потом знать что удалить, если что-нибудь пойдет не так:
  
  /*здесь напишите понятный для себя комментарий*/
  Ответить
ИГорь
Кто-нибудь разобрался с жумлой? Пробовал на разных шаблонах, выводит в лучшем случае текст. Пробовал и с модулем и со статьей. Хром при просмотре кода часть ксс зачеркивает. Вот такой код
```
 -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
```
Ответить
- Юрий Немец
  
  Здравствуйте, Игорь!
  
  Если выводит текст, значит неправильно подключили стили.
  
  Хром зачеркивает, потому что ему другие свойства с префиксами не нужны, а другие браузеры будут использовать строчку с соответствующим префиксом.
  
  Ответить
  - ИГорь
    
    Беру первый пример. В модуль вписал 2 суффикса ch-item ch-img-1. Появилась овальная картинка и вываливающийся из нее текст. При добавлении суффикса ch-info вообще все исчезает.
    
    Может для джумлы какая-то хитрость есть, где недостаточно просто скопировать код в файл ксс? Я подозреваю, что какие-то дефолтные могут мешать нормально выводить картинки. Хром при просмотре кода показывает, что все на месте
    
    Ответить
ИГорь

Дело не в джумле. Сделал простую html страницу, в тело вставил html код. Подключил файл ксс, который скачал, вставил картинки тоже из архива. В итоге у меня картинка стала овальной и растянулась на всю страницу. Вернее картинка не растянулась а повторяется и по вертикали по горизонтали. При наведении происходит нужный эффект, то текст вылетает из картинки в верхний левый угол. Где я мог накосячить?

Ответить
- Юрий Немец
  
  Игорь, внимательно проверьте все классы в HTML и структуру, а затем файл стилей.
  
  Ответить
  - ИГорь
    
    Я исходники скопировал, как они есть. Возможно из-за недостатка знаний что-то в html упустил. Вот такой код у меня
    
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <section class="main">
    <ul class="ch-grid">
    <li>
    <div class="ch-item ch-img-1">
    <div class="ch-info">
    <h3>Текст 1</h3>
    </div>
    </div>
    </li>
    <li>
    <div class="ch-item ch-img-2">
    <div class="ch-info">
    <h3>Текст 2</h3>
    </div>
    </div>
    </li>
    <li>
    <div class="ch-item ch-img-3">
    <div class="ch-info">
    <h3>Текст 3</h3>
    </div>
    </div>
    </li>
    </ul>
    </section>
    </body>
    
    </html>
    
    Ответить
Кирилл

Добрый день, Юрий! Спасибо за статью!! Есть один вопрос, как сделать эффект как у Вас? Я говорю про обводку изображения, как бы бордер, но только с изображением. Я мучался, мучался, но так и не получилось пришлось оставить так. http://itmag.es/1OuUI Я хочу сделать так, как у вас.. Изображение продолжается в окантовку http://itmag.es/A95w Спасибо заранее!

Ответить
- Юрий Немец
  Кирилл, это не изображение продолжается в окантовку, а просто сверху есть слой полупрозрачный по кругу. В статье он делается с помощью свойства:
  
  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.1)
  Ответить
Роман

Юрий, доброго дня! Спасибо за статью, все понятно и доходчиво!

Возник вопрос. Если к примеру на лэндинге на одно странице я хочу использовать два разных эффекта в разных местах страницы, как быть в этом случае? Т.к. я настроил один эффект (демо 1), чуть ниже на странице я решил использовать другой эффект (демо 4) и когда я в хэдере прописываю путь к нужному css (там их теперь два), то первый эффект (style1) летит, т.к. реагирует на добавленный путь к css (style4). Возможно ли на одной странице использовать несколько разных эффектов? Заранее благодарен!

Ответить
- Юрий Немец
  
  Здравствуйте, Роман!
  
  Конечно, вы можете использовать сколь угодно много данных эффектов на одной странице. Вам необходимо не полностью подключать файл стилей, а данные стили скопировать в свой файл стилей CSS.
  
  Ответить
Роман

не получается. там много пресечений что в 1 что в 4 стилях. Пробовал из 4 поэтапно переносить стили в 1 css, а они сразу рушат стили у 1 и наоборот…

Ответить
Роман

как вариант может попробовать классы переиvеновать, и тогда подключить два стиля css

Ответить
Роман

да, все получилось! Добавил в новом стиле в классах единичку, теперь не пересекается по этой части

Ответить
- Юрий Немец
  
  Отлично!
  
  Ответить
- Тимофей
  
  Привет, у меня возникла проблема, я хотел сделать чтобы этот эффект действовал не только на 1 контейнер, попробовал изменить все классы добавив "1" ко всем, не мог бы ты показать как именно нужно добавляет"1"(изменять имена классв)
  
  Спасибо!
  
  Ответить
Артём

Добрый день. Начал учить css пару дней назад. Не могу разобраться куда подключать сам адрес изображения. Грубо говоря есть название картинки — detal.jpg . Что нужно прописать чтоб она использовалась в анимации?

Ответить
- Юрий Немец
  
  Добрый день, Артём!
  
  Вы скачали архив со всеми примерами? (если увидите структуру, поймете где подключаются изображения и как они расположены в папках). Архив с примерами находится в начале статьи.
  
  Вы все правильно написали, адреса изображений находятся в соответствующих файлах стилей. Для каждого примера свой файл стилей.
  
  Ответить
Олег

На Joomla Не работает, как ни старался, овальный круг и все!!! До этого пробовал со списками, тоже не работает, одна циферка га первом списке и все, может знающие и разберутся, а для новичков как то мутно все. Возможно нужно и скрипт подцеплять т.к в скаченном архиве есть папка js.

Ответить
susann1969

Добрый день, Юрий!
Попробовала переделать 4 эффект. Все получилось. Поменяла овал на прямоугольник, размер увеличила, вместо надписи поворачивает картинку. Единственное, что не получается, это задняя рамка. Она остается старого размера. Где исправить — не нашла. Не подскажете?

Ответить
Димыч

В css что-то происходит если наводишь курсор, а есть ли такой вариант чтобы элемент сам крутился? Или это уже яваскрипт?

Ответить

Exore LTD » CSS3 » Потрясающие эффекты CSS3 при наведении

Потрясающие эффекты CSS3 при наведении

Потрясающие эффекты CSS3 при наведении курсора

HTML часть

CSS часть

HTML часть

CSS часть

HTML часть

CSS часть

HTML часть

CSS часть

HTML часть

CSS часть

HTML часть

CSS часть

HTML часть

CSS часть

Вывод

Успехов!

Еще материалы по этой теме

Расскажите о вашей задаче

Спасибо за ваше обращение!

Отправить статью

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

68 комментариев к записи

Добавить комментарий Отменить ответ

Выберите удобный способ получения обновлений

Получать обновления можно в любом мессенджере:

Получать обновления можно на ваш Email: