Lecaw

Учимся создавать Web-сайты

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

August 19, 2012
CSS
134hits

В сегодняшнем уроке мы будем экспериментировать с круговыми эффектами. Так как у нас есть свойство 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="#">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="#">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="#">View on Dribbble</a></p>
</div>
</div>
</li>
</ul

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

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

В первом примере будем отображать описание элемента путем его расширения, и мы также анимируем внутреннюю тень 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);
}

Зададим абсолютную позицию для описания элемента, дадим ему полупрозрачный фон css, устанавливая значение RGBA. Непрозрачность 0, и мы будем использовать масштаб элемента также до 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 от 16 пкс до 1 пкс:

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

css transition

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

<li>
<div class="ch-item">
<div class="ch-info">
<h3>Music poster</h3>
<p>by Jonathan Quintin <a href="#">View on Dribbble</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>

Элемент div будет иметь стиль как и раньше (с небольшой 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)

circle css

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

<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="#">View on Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>

Мы добавим css фоновое изображение к элементу 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;
}

Дополнительная оболочка будет использоваться у perspective, мы также добавим переход для 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 div должно сохранить 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);
}

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

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

CircleHoverEffects_05

В этом примере мы уменьшим масштаб внутренней части миниатюры до 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)

CircleHoverEffects_06

В этом примере мы зеркально отразим внутреннюю часть миниатюры, чтобы показать описание. 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;
}

У оболочки будет perspective:

.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

CircleHoverEffects_07

Последний пример будет работать как вращающийся куб где мы покажем описание, при его повороте от вершины вниз. Так как мы повернем каждую из поверхностей, нам будет не нужна дополнительная оболочка. Так, 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="#">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, и источник преобразования будет установлен в 50% 0%:

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

 ДЕМОИсходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа