Эффекты при наведении 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, комментируйте и задавайте вопросы.