Эффекты с блоками в CSS
С помощью CSS можно создавать различные эффекты с блоками. Например, у Вас есть на главной странице сайта блоки с изображениями. Когда при наведении курсора на картинку в блоке, последняя уменьшается и перемещается в сторону, а вместо нее появляется текст, который может быть ссылкой ведущей на страницу с полным текстом статьи.
Посмотрите такие эффекты с блоками на демо примере ниже:
Как видите, эффект довольно интересный и вполне достоин, чтобы вы его использовали на своем сайте.
Сделать такие эффекты с блоками совсем не сложно если вы уже имеете начальное представление, что такое 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