Круговые эффекты с CSS transition / CSS Тень

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

Сложность

HTML разметка

Для большинства примеров мы будем использовать следующую HTML структуру:

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Use what you have</h3>
<p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Common Causes of Stains</h3>
<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Pink Lightning</h3>
<p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
</div>
</div>
</li>
</ul

Здесь мы используем фоновые изображения, определили их в классах, начиная с ch-img-. Кроме того, мы будем использовать отдельный контейнер для описания открытого элемента.

CSS

Давайте определим общий стиль для элементов списка:

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
 
.ch-grid:after {
    clear: both;
}
 
.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

Мы разместим элементы списка и текст по центру страницы при помощи display: inline-block.

В некоторых примерах структура будет немного отличаться, но мы разберем её отдельно для каждого примера.

Пример 1 (Внутренняя тень CSS)

В первом примере будем отображать описание элемента путем его расширения, также анимируем внутреннюю тень css для самого элемента.

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    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);
    transition: all 0.4s ease-in-out;
}

Обратите внимание, мы создали два класса элемента: один ct-item, а другой устанавливает фоновое изображение:

.ch-img-1 { 
    background-image: url(../images/1.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/2.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/3.jpg);
}

Зададим абсолютную позицию для описания элемента, установим полупрозрачный фон, используем значение RGBA. Непрозрачность и масштаб 0:

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

У заголовка будет небольшой отступ, нижняя рамка и гладкая тень текста css:

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

Для абзаца зададим непрозрачность со значением 0 и css transition (нам нужно что бы он постепенно появился при наведении, но с задержкой):

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

Для ссылки используем прописные буквы, сделаем её желтой при наведении курсора:

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

А теперь интересный эффект при наведении курсора!

Анимируем внутреннюю тень CSS от 16px до 1px:

.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);
}

Описание постепенно появится и увеличится до 1:

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}

Ссылка с автором также будет постепенно появляться (с задержкой):

.ch-item:hover .ch-info p {
    opacity: 1;
}

Это был первый пример! Давайте перейдем ко второму.

Пример 2 (Тень текста CSS)

HTML структура в этом примере совпадает с первым.

В этом примере мы будем использовать свойство box-shadow, чтобы заполнить наш круг тенью, которая послужит в качестве фона для описания.

Так, здесь ничего нового, просто 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);
    transition: all 0.4s ease-in-out;
}

Фоновые изображения css:

.ch-img-1 { 
    background-image: url(../images/4.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/5.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/6.jpg);
}

Уменьшаем размер описания:

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    backface-visibility: hidden;
}

Стиль текста:

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 65px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении мы анимируем css тень блока (красноватая) по радиусу к центру круга на 110px. Это заполнит весь круг:

.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);
}

Описание постепенно увеличится в размере от 0:

.ch-item:hover .ch-info {
    opacity: 1;
    transform: scale(1);    
}

Пример 3 (CSS transition)

В этом примере мы будем экспериментировать с вращением. Структура будет несколько отличаться от первых двух примеров, так как мы должны добавить миниатюру ко второму контейнеру. Элемент списка будет выглядеть следующим образом:

<li>
<div class="ch-item">
<div class="ch-info">
<h3>Music poster</h3>
<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>

Контейнер будет иметь стиль как и в прошлых примерах (с небольшой 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);
}

У миниатюры будет transform-origin (где-нибудь в середине) и css transition. При наведении, поворачиваем к низу, чтобы отображалось описание:

.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);
    transform-origin: 95% 40%;
    transition: all 0.3s ease-in-out;
}

С помощью псевдо-класса :after мы создадим небольшую застежку с радиальным градиентом:

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    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-img-1 { 
    background-image: url(../images/7.jpg);
    z-index: 12;
}
 
.ch-img-2 { 
    background-image: url(../images/8.jpg);
    z-index: 11;
}
 
.ch-img-3 { 
    background-image: url(../images/9.jpg);
    z-index: 10;
}

Описание:

.ch-info {
    position: absolute;
    width: inherit;
    height: inherit;
    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-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

Точка соприкосновения будет небольшим кругом, который должен отодвигаться в право при наведении курсора:

.ch-info p a {
    display: block;
    color: #333;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transform: translateX(60px) rotate(90deg);
}
 
.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}

Нам нужно чтобы перемещение и непрозрачность работали с задержкой, фон должен работать без задержки, поэтому разделим переходы:

При наведении мы повернем наш круг и переместим/повернем элемент ссылки:

.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);
    transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}

Пример 4 (Тень блока CSS)

Дальше применим некоторые 3D вращения. Для начала, скорректируем структуру, чтобы у нас был контейнер для перспективы, передней и задней стороны. Элементы списка будут выглядеть следующим образом:

<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>Bears Type</h3>
<p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>

Мы добавим фоновое изображение к элементу div, а также к передней части зеркального отражения. Это должно установить тот же фон, как и в ch-info-wrap. Это создаст иллюзию, как будто у нашего элемента есть дыра по центру.

У элементов будет обычный стиль:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Дополнительная оболочка будет использоваться для перспективы, также добавим переход для css тени:

.ch-info-wrap{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    perspective: 800px;
    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 преобразует 3D transform-style, добавим к нему css transition, так как это – 3D элемент:

.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
}

У передней и задней стороны будут следующие общие стили:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    backface-visibility: hidden;
}

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

.ch-info .ch-info-back {
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}

И снова фоновые изображения css:

.ch-img-1 { 
    background-image: url(../images/10.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/11.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/12.jpg);
}

Стиль для текста:

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

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

.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 {
    transform: rotate3d(0,1,0,-180deg);
}

Пример 5 (Фоновые изображения css)

В этом примере мы уменьшаем масштаб внутренней части миниатюры до 0 и отображаем описание, оно будет постепенно появляться и увеличится в масштабе до 1.
Структура точно такая же как и в предыдущем примере

Обычный стиль для элементов:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

У контейнера с информацией будет следующий стиль:

.ch-info-wrap, 
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

Еще раз воспользуемся приемом "дыры", устанавливая тот же фон для оболочки:

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

У передней стороны будет переход (она уменьшится и исчезает):

.ch-info .ch-info-front {
    transition: all 0.6s ease-in-out;
}

Задняя сторона с описанием, первоначально имеет непрозрачность 0 и будет увеличена до 1.5:

.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out 0.2s;
}

Стиль для фоновых изображений и текста, как и в остальных примерах, только с другими цветами:

.ch-img-1 { 
    background-image: url(../images/13.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/14.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/15.jpg);
}
 
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: #e7615e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: #fff;
}

При наведении, уменьшаем масштаб внутренней части миниатюры до 0 и устанавливаем непрозрачность в 0. Это заставит её исчезнуть.

.ch-item:hover .ch-info-front {
    transform: scale(0);
    opacity: 0;
} 

Часть, которая содержит описание, будет уменьшена до 1.

.ch-item:hover .ch-info-back {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

Пример 6 (CSS transform)

В этом примере мы зеркально отразим внутреннюю часть миниатюры, для отображения описания. HTML структура будет такая же, как и в предыдущих двух примерах.

Стиль элементов:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Общий стиль оболочки и описания:

.ch-info-wrap, 
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

Перспектива:

.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);
    perspective: 800px;
}

Для описания используем свойство css transform-style:

.ch-info {
    transform-style: preserve-3d;
}

У передней и задней стороны будет css transition. Обратите внимание, что на сей раз мы не будем скрывать заднюю сторону (hidden), так как нам нужно, чтобы обратная сторона внутренней части миниатюры отображалась, когда мы зеркально отражаем её вниз:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.6s ease-in-out;
}

Установим свойство css transform-origin так, чтобы мы могли открыть и переместить вниз:

.ch-info .ch-info-front {
    transform-origin: 50% 100%; 
    z-index: 100;
    box-shadow: 
        inset 2px 1px 4px rgba(0,0,0,0.1);
}

Задаем значение RGBA с 0 непрозрачностью к фону элемента с описанием:

.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}

Основной стиль для остальных элементов:

.ch-img-1 { 
    background-image: url(../images/16.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/17.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/18.jpg);
}
 
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 25px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении поварачиваем переднюю часть и анимируем css тень. Задняя часть постепенно появляется из фона:

.ch-item:hover .ch-info-front {
    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 структура:

<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Mouse</h3>
<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
</div>
</div>
</div>
</li>

Зададим значение perspective для самого элемента:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    perspective: 900px;
}

Элемент с классом ch-info будет сохранять 3D пропорции:

.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

У передней и задней стороны будет css transition:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.4s linear;
    transform-origin: 50% 0%;
}

Давайте установим css тень для передней части:

.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

Задняя сторона будет повернута изначально, что бы лицевая часть была видимой при сдвиге элемента:

.ch-info .ch-info-back {
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}

Стандартный стиль для фоновых изображений и текста:

.ch-img-1 { 
    background-image: url(../images/19.jpg);
}
 
.ch-img-2 { 
    background-image: url(../images/20.jpg);
}
 
.ch-img-3 { 
    background-image: url(../images/21.jpg);
}
 
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: 0 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

Используем свойство translate3d, чтобы переместить переднюю часть по оси Y и rotate3d, для поворота.

.ch-item:hover .ch-info-front {
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

Задняя сторона будет повернута в обратную сторону до 0 градусов (помните, первоначально она была повернута вниз):

.ch-item:hover .ch-info-back {
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

Перевод статьи Circle Hover Effects with CSS Transitions

Тэги: Illustrations

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.