Красивое оформление картинок через css

14 Июня 2015

Удачно подобранный анимационный эффект нередко значит куда больше, чем все остальные усилия, призванные удержать пользователя на Вашем сайте. При этом, чрезмерные ухищрения по части визуального оформления интернет ресурса уж точно в раскрутке сайта не помогут, впрочем, сегодня не речь не об этом. В этом посте я постараюсь описать несколько возможных вариантов анимации надписи, которая будет обрамлять картинку из статьи. Ничего сложного – только css и html.

Итак, поехали.

Первый вариант оформления, который я могу предложить – это надпись, которая при наведении на блок с картинкой будет выплывать сверху и центрироваться относительно блока, к которому относится.

Css и html код:

<div class="container-demo">
  <div class="block">
   <div class="text"><span class="value">Красивая картинка</span></div>
   <img src="/images/demo.jpg" alt="" class="img img-blur">
  </div>
 </div>
.block { /*контейнер для фотографий*/
 display: block;
 position: relative;
 cursor: pointer;
 overflow: hidden;
 max-width: 800px;
 margin: 0 auto;
}

.text {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: -34px;  
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text{
 top: 0;
}
/*эффект при наведении*/
.block:hover .text .value{
 margin-left: 40%;
}
Красивая картинка

Здесь важно отметить несколько принципиальных моментов. Эффект в общем-то не так уж и плохой, однако есть одно обстоятельство, которое некоторым образом портит от него впечатление – это свойство margin-left, которое срабатывает при наведении на блок с картинкой. Дело в том, что значение, которое выставлено в данном случае не является обобщенным, соответственно, в случае, если мы надпись над картинкой будет несколько шире – изменятся пропорции и эффект уже не будет красиво смотреться.

Рассмотрим второй вариант. Здесь будет работать свойство opacity.

.text-opacity {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: 0;
 text-align: center;
 padding: 10px 0;
 opacity: 0;/*изначально текст скрыт*/
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text-opacity {
 opacity: 1;
}
<div class="container-demo">
  <div class="block">
   <div class="text-opacity">Красивая картинка</div>
   <img src="/images/photos/eternal/sunset_new4.jpg" alt="" class="img img-blur">
  </div>
 </div>
Красивая картинка

Ну и последний случай, где текст, изначально спрятан с помощью свойства top.

.text-top {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: -38px;/* выставляем значение таким образом, чтобы текст не было видно*/
 text-align: center;
 padding: 10px 0;
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text-top {
 top: 0;
}
<div class="container">
  <div class="block">
   <div class="text-top">Красивая картинка</div>
   <img src="/images/photos/eternal/sunset_new4.jpg" alt="" class="img img-blur">
  </div>
 </div>
Красивая картинка

Думаю, для фотоблогов данные эффекты, вполне могут пригодиться, но выбирать, конечно же, не мне.

На этом пока все. Спасибо за внимание!

0
Комментарии

комментариев еще нету

Для того, чтобы выразить экспертное мнение, нужно авторизироваться