Эффекты с блоками в CSS

Опубликовано: 08.02.2021 в категории: HTML/CSS

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

Посмотрите такие эффекты с блоками на демо примере ниже:

Котики

Здесь Ваш первый текст в блоке 1, который раскрывается при наведении курсора на первую картинку. Этот текст может быть и ссылкой.

Земля

Здесь Ваш второй текст в блоке 2, который раскрывается при наведении курсора на вторую картинку. Этот текст может быть и ссылкой.

Часы

Здесь Ваш третий текст в блоке 3, который раскрывается при наведении курсора на третью картинку. Этот текст может быть и ссылкой.

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

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

Первым делом необходим код HTML который мы прописываем на странице, в месте где будут расположены наши блоки:

<div class="container">
<h1>Демо эффекты с блоками на CSS</h1>
<div class="blockcenter"> 
<div class="blocks">
<div class="imgblock1"></div>
<a href="#" class="mylink" title="Я могу быть ссылкой!"></a>
<h3>Котики</h3>
<p>Здесь Ваш первый текст в блоке 1, который раскрывается при наведении курсора на первую картинку. Этот текст может быть и ссылкой.</p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
<div class="blocks">
<div class="imgblock2"></div>
<a href="#" class="mylink" title="Я могу быть ссылкой!"></a>
<h3>Земля</h3>
<p>Здесь Ваш второй текст в блоке 2, который раскрывается при наведении курсора на вторую картинку. Этот текст может быть и ссылкой. </p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
<div class="blocks">
<div class="imgblock3"></div>
<a href="#" class="mylink" title="Я могу быть ссылкой!"></a>
<h3>Часы</h3>
<p>Здесь Ваш третий текст в блоке 3, который раскрывается при наведении курсора на третью картинку. Этот текст может быть и ссылкой. </p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
</div>
</div>

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

h1 {
text-align: center;
color: #FFCC33;
}
.blockcenter {
display: flex;
Justify-content: center;
}
.blocks {
display: inline-block;
width: 300px; /*ширина блока*/
height: 250px; /*высота блока*/
margin: 50px 30px;
position: relative;
overflow: hidden;
background: #660000; /*цвет фона блока*/
}

.blocks p {
color: #fff; /*цвет текста описания*/
opacity: 0;
text-align: center;
padding: 30px 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s;
}

.blocks h3 {
text-align: center;
color: #FFCC33; /*цвет текста заголовка*/
font-size: 20px;
margin: 0;
padding: 20px;
line-height: 25px;
opacity: 0;
padding: 20px 20px 0 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s;
}

.blocks:hover p, .blocks:hover h3{
opacity: 1;
}

.mylink {
position: absolute;
top:0;
left:0;
display: block;
cursor: pointer;
width: 100%;
height: 100%;
}

/* Свойства блоков с картинками */
.imgblock1, .imgblock2, .imgblock3{
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
-webkit-transition: all 0.4s ease-in-out .3s;
transition: all 0.4s ease-in-out .3s;
z-index: 10;
}

/* Здесь проставляем правильную директорию для наших изображений */
.imgblock1 {
background: url(images/cats.png) no-repeat 50% 50%;
}

.imgblock2 {
background: url(images/globe.png) no-repeat 50% 50%;
}

.imgblock3 {
background: url(images/clock.png) no-repeat 50% 50%;
}

/* Анимация иконки при наведении */
.blocks:hover .imgblock1, .blocks:hover .imgblock2, .blocks:hover .imgblock3 {
top:-30%;
left:-35%;
-webkit-transform:scale(0.3);
transform:scale(0.3);
}

/*Обводка*/
.lineTop, .lineRight, .lineBottom, .lineLeft {
position: absolute;
background: #FFCC33; /*цвет границы*/
-webkit-transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
}

.lineTop, .lineBottom { width: 100%;height: 6px;}
.lineLeft, .lineRight { width: 6px;height: 100%;}

/*граница сверху*/
.lineTop {left:-100%;top:0;}
.blocks:hover .lineTop {left:0;}

/*граница справа*/
.lineRight {top:-100%;right:0;}
.blocks:hover .lineRight {top:0;}

/*граница снизу*/
.lineBottom {right:-100%;bottom:0;}
.blocks:hover .lineBottom {right:0;}

/*граница слева*/
.lineLeft {bottom:-100%;left:0;}
.blocks:hover .lineLeft {bottom:0;}

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

А здесь интересный материал о том, как легко выравнивать блоки с помощью свойства  display flex

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

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

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

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

Заявка на бесплатную консультацию

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

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

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

          Даю свое согласие на обработку персональных данных.

          ×