Эффекты при наведении CSS | WAVIFUN.RU

Эффекты при наведении CSS

Эффекты при наведении CSS

Привет всем. В этой статье мы рассмотрим с вами эффекты при наведении css. Но сначала давайте разберемся, как вообще создавать эффекты при наведении. Для этого в CSS есть так называемый псевдокласс hover. Как его применять?

div:hover {
 color:#fff
}

Это означает: если мы наведем на div, то цвет текста изменится на белый (#fff).

Какие css эффекты при наведении бывают? Их достаточно большое количество, и, в принципе, то, как вы будете их применять, зависит от вашей фантазии.

Далее мы с вами рассмотрим css эффекты при наведении на изображение. Итак, для начала давайте создадим html документ, в котором изобразим структуру.

<div class="wrapper">
 <h2>Эффект появления текста при наведении</h2>
  <div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
</div>

Мы создали блок с классом wrapper, в который поместили блок с классом block block1. Далее поместили в этот блок картинку и текст с заголовком. Теперь нам необходимо размножить блок с классом block block1. Выглядит это так:

<div class="wrapper">
 <h2>Эффект появления текста при наведении</h2>
  <div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
<div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
<div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
<div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
<div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
<div class="block block1">
   <img src="images/img132456.png" alt="">
    <div class="text">
     <h5>Lorem ipsum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt at arcu ac tristique. Integer mollis quis arcu in volutpat. Etiam ac neque lectus. Cras.</p>
    </div>
   </div>
</div>

Далее мы можем приступить к стилизации документа. Для начала зададим стили для блока с классом wrapper. Зададим ширину, выравняем по центру и добавим свойство overflow.

.wrapper {
 width: 80%;
 margin:20px auto;
 overflow: hidden;
}

Далее зададим стили всем элементам с классом block. Укажем ширину, выравнивание по левому краю, отступы, рамку и высоту.

block {
 width: 45%;
 float: left;
 margin: 2%;
 border:1px solid #ccc;
 height: 200px;
 }

Также зададим стили картинкам:

img {
 width: 100%;
 background-size: 100%;
}

И, наконец, стилизуем текст. Это блок с классом text.

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

.text {
background: rgba(0,0,0,0.5);
padding: 2%;
position: relative;
top:-100px;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}

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

.block1:hover > .text {
top:-155px;
opacity: 1;
visibility: visible;
cursor: pointer;
}

В данной статье мы рассмотрели принцип hover эффектов при наведении. Если материал был вам полезен ставьте LIKE, комментируйте и задавайте вопросы.

17.05.2017
297
0
0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest