Красивый hover эффект для карточки на сайте на чистом CSS

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

HTML

Здесь 3 основных элемента:
card-container – это основной контейнер внутри которого находится вся информация.
card--display – внутри находится информация которая будет выводиться на лицевой стороне блока.
card--hover – здесь находится информация которая будет выводиться при наведение курсора на элемент.

<div class="card-container">
       <div class="card">
           <a href="" class="hottub">
               <div class="card--display">
                   <i class="material-icon">PROG-TIME</i>
                   <h2>Делаем необычную анимацию для карточки</h2>
               </div>
               <div class="card--hover">
                   <h2>Внимание</h2>
                   <p>Весь код представленный в видео находится на сайте prog-time.ru. Ссылка на запись в описание.</p>
               </div>
           </a>
           <div class="card--border"></div>
       </div>
   </div>
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

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

avatar
3 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
JanleFStepFoush Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Cialis Tarif [url=http://apcialisle.com/#]Buy Cialis[/url] Buy Prednisone Without No Prescription cialis Cheap Sildenafil 100mg

StepFoush
Гость

Viagra Homme Forum [url=https://apcialisle.com/#]buy generic cialis online[/url] Viagra E Glande Cialis Levitra Efectos Adversos

JanleF
Гость

Avis Sous Clomid [url=https://buyciallisonline.com/#]Cialis[/url] Low Cost Levitra In The Usa Cialis Levitra Farmacia Di