Красивый 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

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

avatar
  Подписаться  
Уведомление о