logo

Трансформации для блока анонсов

Пример 1

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


       <!--   Блоки, содержащие информацию анонса для вывода на экран  -->
<div class="block__info">
  <div class="block__info_text"></div>
  <a href="#" class="block__info_link" title="Переход по ссылке!"></a>
  <h6 class="block__info_h6">Uniform Title</h6>
  <p class="block__info_p">Lorem ipsum dolor sit amet..... </p>
      <!--   Блоки, "рисующие" линии по периметру блока  -->
  <div class="block__info_L_top"></div>
  <div class="block__info_L_right"></div>
  <div class="block__info_L_bottom"></div>
  <div class="block__info_L_left"></div>
</div>

Верхняя часть кода содержит ту информацию, которая должна появляться на экране. В данном примере блок с картинкой, ссылку и текст. В нижней части 4 блока, с помощью которых «рисуются» линии по периметру блока при наведении курсора.

Первоначально на экране видим картинку на сером фоне, но при наведении курсора картинка уменьшается и «убегает» в верхний угол блока, по периметру «рисуются» линии, и на белом фоне появляется текст-ссылка.

Для примера сделаем 2, почти идентичных блока, которые расположены ниже:

Uniform Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin.

Uniform Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin.

Таблица стилей для каждого их вариантов одинакова, за исключением нескольких строк, выделенных цветом. Они применимы для второго варианта (естественно строки с такими же свойствами, расположенные над цветными — удаляются).


.block__info {
    width: 300px;
    height: 200px;
    margin:30px ;
    position: relative;
    overflow: hidden;
    background: #444;
    display: inline-block;
    transition: background .2s ease-in-out .6s;
}
.block__info_p {
    color: #333;
    opacity: 0;
    font-size: .9rem;
    text-align: justify;
    padding: 0 20px 20px 20px;
    transition: opacity .2s ease-in-out .6s;
}
.block__info_h6 {
    text-align: center;
    color: #77b3d4;
    font-size: 20px;
    margin: 0;
    padding: 0;
    line-height: 25px;
    opacity: 0;
    padding: 20px 20px 10px 20px;
    transition: opacity .2s ease-in-out .6s;
}
.block__info:hover {
    background: #eee
}
.block__info:hover .block__info_p,
.block__info:hover .block__info_h6 {
    opacity: 1;
}
.block__info_link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.block__info_text,
.block__info_text2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .4s ease-in-out .3s;
    z-index: 10;
}
.block__info_text {
    background: url(images/img1.jpg) no-repeat 50% 50%;
}
.block__info_text {
      background: url(images/img2.jpg) no-repeat 50% 50%;
  }
.block__info:hover .block__info_text {
    top: -35%;
    left: -40%;
    transform: scale(0.3);
}
.block__info:hover .block__info_text {
      top: -35%;
      left: 38%;
      transform: scale(0.3);
}

Настала очередь блоков, «рисующих» линии по периметру


.block__info_L_top,
.block__info_L_right,
.block__info_L_bottom,
.block__info_L_left {
    position: absolute;
    background: #77b3d4;
    transition: top .4s ease-in-out 0s, right .4s ease-in-out 0s, bottom .4s ease-in-out 0s, left .4s ease-in-out 0s;
}
.block__info_L_top,
.block__info_L_bottom {
    width: 100%;
    height: 6px;
}
.block__info_L_left,
.block__info_L_right {
    width: 6px;
    height: 100%;
}
.block__info_L_top {
    left: -100%;
    top: 0;
}
.block__info:hover .block__info_L_top {
    left: 0;
}
.block__info_L_right {
    top: -100%;
    right: 0;
}
.block__info:hover .block__info_L_right {
    top: 0;
}
.block__info_L_bottom {
    right: -100%;
    bottom: 0;
}
.block__info:hover .block__info_L_bottom {
    right: 0;
}
.block__info_L_left {
    bottom: -100%;
    left: 0;
}
.block__info:hover .block__info_L_left {
    bottom: 0;
}

Первоначально блоки «сдвинуты» каждый в свою сторону на -100% и поэтому их не видно. При наведении курсора начинаются трансформации и блоки занимают «нулевое «left: 0; top: 0; right: 0; bottom: 0; положение. Это схематически изображено ниже, где указано первоначальное положение блоков и направление последующего движения.

Эскиз

Пример 2

Для блоков используем изображения уже применяемые на сайте, т.к это не принципиально, ведь каждый из вас наверняка будет применять свои. Главное сам принцип трансформации элементов блока.

Рисунок 1

uniform title

A wonderful serenity has taken possession of my entire soul, like thse .

Transition on click

Рисунок 1

uniform title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Transition on click

Для каждого из блоков напишем следующий код.


<div class="block__view">
  <img src="images/img.jpg" alt="Рисунок" class="block__view_img" >
  <div class="block__mask">
    <h2 class="block__mask_h2">uniform title</h2>
    <p class="block__mask_p">A wonderful serenity has taken possession of my entire soul, like thse .</p>
    <a href="#" class="block__mask_link">Transition on click</a>
  </div>
</div>

Оформляем блоки в таблице стилей. Цвета, размеры, отступы и др., как обычно на свой вкус и их можно корректировать при необходимости.


.block__view {
    background: #fff;
    width: 300px;
    height: 186px;
    position: relative;
    margin: 20px;
    overflow: hidden;
    border: 10px solid transparent;
    box-shadow: 1px 1px 8px rgba(90, 88, 88, 0.8);
}
.block__view_img {
    transition: all ease-in .5s;
}
 .block__mask {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    text-align: center;
}
.block__mask_h2 {
    color: #4b4848;
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1px;
    margin-top: 10px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #0d0a0b;
    background: rgba(248, 194, 71, 0.7);
    transform: translateY(-100px);
    transition: all ease-in .5s;
    opacity: 0;
}
.block__mask .block__mask_p {
    color: #fff;
    font-size: 14px;
    padding: 10px;
    margin: 10px 0 ;
    text-shadow: 1px 0 2px #000;
    background: rgba(105, 98, 82, 0.65);
    transform: translateY(120px);
    transition: all .5s ease-in .1s;
    opacity: 0;
}
.block__mask_link {
    color: #2e9beb;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    background: rgba(245, 177, 22, 0.75);
    text-shadow: 1px 1px 1px #1c3764;
    box-shadow: 1px 1px 3px #444;
    border: 1px solid rgba(167, 130, 48, 0.8);
    border-radius: 5px;
    padding: 5px;
    opacity: 0;
    transition: all .5s ease-in;
}
.block__mask_link:active {
    box-shadow: none;
    background: #2bcade;
    color: #fcb30e;
}

С помощью свойства
transform: translateY (…)
заголовок «поднимаем вверх» на 100рх, а текст анонса соответственно «опускаем вниз» на 120рх.
Значения выбраны исходя из размеров блока и картинки. Также подлежат коррекции под необходимые значения.

Второе условие — «невидимость». Для этого используем свойство
opacity: 0
. Благодаря этому условию ссылка никуда не убирается, просто не видна.

Осталось навести курсор на картинку и увидеть результат: заголовок «выезжает» сверху, текст анонса — снизу, а ссылка плавно проявляется.


.block__view:hover .block__view_img {
    opacity: .25;
    box-shadow: 3px 3px 5px #000;
    transform: scale(1.5, 1.5)
}
.block__view:hover .block__mask_h2 {
    opacity: 1;
    transform: translateY(0)
}
.block__view:hover .block__mask_p {
    opacity: 1;
    transform: translatex(0);
    transition: all ease-in .5s
}
.block__view:hover .block__mask_link {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in .5s
}

Авто…Алфавит

a

AUDI

Audi ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.

Audi

b

BMW

BMW ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.

BMW

c

Citroen

Citroen ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.

Citroen

d

Dodge

Dodge ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.

Dodge

Все начинается с HTML. Код для одного из блоков:


<div class="block__make clearfix">
  <div class="block__make_symbol">
      <div class="block__make_symbol-icon">a</div>
  </div>
  <div class="block__make_content">
      <div class="block__make_content-text">
          <p class="block__make_content-text-name">AUDI</p>
          <p class="block__make_content-text-p"><b>Audi</b> ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi velit itaque minus nostrum ea.</p>
      </div>
      <img  class="block__make_content-img" src="images/audi.jpg" alt="Audi">
  </div>
</div>

Оформление основного блока:


.block__make {
    max-width: 352px;
    max-height: 178px;
    margin: 0 15px 15px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

Левая часть — блок с буквой (на этом месте может быть любой знак, иконка) в кружке.


.block__make_symbol {
    width: 20%;
    height: 178px;
    float: left;
    border: 1px solid #968787;
    border-right: 0;
}
.block__make_symbol-icon {
    width: 60px;
    height: 60px;
    background: #c4e0f2;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 1px 1px 3px -2px #333;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    line-height: 60px;
    margin: 55px auto 0;
    transition: all .4s ease;
}
.block__make:hover .block__make_symbol-icon {
    box-shadow: 0 0 3px -1px #333;
    transform: rotate(360deg);
}

Правая часть — текст и картинка.


.block__make_content {
    width: 80%;
    height: 178px;
    float: right;
    overflow: hidden;
    position: relative;
    border: 1px solid #968787;
}
.block__make_content-text {
    height: 168px;
    padding: 10px;
    text-align: left;
}
.block__make_content-text-name {
    font-size: 1.6em;
    margin-bottom: 10px;
    margin-top: 20px;
}
.block__make_content-text-p {
    font-size: 14px
}
.block__make_content-img {
    max-width: 100%;
    position: absolute;
    top: 168px;
    left: 0;
    transition: all .4s ease;
}
.block__make:hover .block__make_content-img {
    opacity: .85;
    top: 0;
}

Если вопросов нет — можете применять данное решение в своих проектах. Удачи!


Практические примеры 0

Рекомендую прочитать...

Ссылки, события при наведении и клике

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

Читать полностью
Градиент в качестве фона
Градиент в качестве фона

Ранее в качестве фона для сайта использовали либо просто заливку цветом, либо какую-то картинку, которая «весила» достаточно много . Затем стали использовать маленький «кусочек» — картинку малого размера, которую множили на весь экран.
Уже сейчас в современных браузерах можно сделать градиентный фон любой сложности при помощи CSS, и при этом совершенно не используя картинки.

Читать полностью
Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью

Всего комментариев: 0

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

Ваш email не будет опубликован.