CSS эффект при наведение на картинку

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

See the Pen EbdNyb by Denis (@Dwstroy) on CodePen.

CSS эффект описываем каркас блоков для трансформации

Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.

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

div.dws>div.blocImg>img+div.blocText>div.text>h2+p    

<section>
   <div class="dws">
      <div class="blocImg"><img src="img/1.jpg" alt="CSS эффект">
         <div class="blocText">
            <div class="text">
               <h2>CSS эффект <span>при наведении</span></h2>
               <p>transition<br> transform scale(x,y)<br>:hover ::before ::after</p>
            </div>
         </div>
      </div>
   </div>
</section>    

Описываем основные стили картинки / эффект на css

Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden, скрываем все лишнее за ее пределами, добавляем курсор.

.blocImg {
 width: 600px;
 height: 338px;
 overflow: hidden;
 cursor: pointer;
}    

Позиционируем для удобства блок посередине экрана.

.dws {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}    

Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.

.blocImg img {
 width: 100%;
 transition: .5s;
}    

Далее трансформируем, немного разворачиваем rotate(-10deg), и увеличиваем в размере scale(1.3).

Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5;.

.dws:hover .blocImg img {
 transform: rotate(-10deg) scale(1.3);
 filter: blur(1px);
 opacity: .5;
}    

Теперь приступим к стилилизации текста.

Оформляем текстовое содержание блока

Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.

.blocText {
 outline: 1px solid orange;
 position: absolute;
 top: 30px;
 left: 30px;
 right: 30px;
 bottom: 30px;
}  

Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.

.text {
 color: #fff;
 text-transform: uppercase;
 padding: 0 20px;
}    

Заголовку второго уровня задаем 25 пик.

.text h2 {
 font-size: 25px;
}    

Вторую его часть делаем оранжевым цветом, устанавливаем отступы с низу для черты, и делаем нижнее подчеркивание в 2 пик .

.text h2 span {
 color: orange;
 padding-bottom: 3px;
 border-bottom: 2px solid #fff;
}    

Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.

.text p {
 position: absolute;
 top: 180px;
 width: 250px;
 border-left: 4px solid #ffb611;
 padding: 0 10px;
}    

Описываем псевдоэлементы ::before и ::after

Уберем обводку outline, которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.

Создаем псевдоэлементы ::before ::after , описываем их основные стили. 

Позиционируем их абсолютно, задаем ширину и высоту по 100%  и платное появление в пол секунды.

.blocText::before,
.blocText::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}    

Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1).

.blocText::before {
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 transform: scale(0,1);
}    

Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y

.blocText::after {
 border-left: 1px solid #fff;
 border-right: 1px solid #fff;
 transform: scale(1,0);
}    

А для их появления, трансформацию для всех осей указываем в 1.

.dws:hover .blocText::before,
.dws:hover .blocText::after {
 transform: scale(1,1);
}    

И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.

А по наведении текст отображаем.

.dws:hover .text {
 opacity: 1;
}    

В конечном итоге получили классный Hover Effects при наведение на картинку.

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

Урок подготовил Горелов Денис.

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