Эффект анимации

[Скопировать ссылку]
admin Опубликовано 18-12-2020 18:08:52 | Показать все сообщения |Режим чтения Печать Назад Вперед
Это эффект анимации переключения изображения при наведении курсора мыши css3
Совместимость

Краткое описание

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

Поделится:
Краткое руководство
Это эффект анимации переключения изображения при наведении курсора мыши css3. Когда специальный эффект наведен на изображение, оно будет скрыто в виде анимации и будет отображаться другое изображение.
инструкции
Представлено в HTML-файле.
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
  2. <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">  
Скопировать код
Структура HTML
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-3 col-sm-6">
  4.             <div class="product-grid">
  5.                 <div class="product-image">
  6.                     <a href="#" class="image">
  7.                         <img class="pic-1" src="images/img-1.jpg">
  8.                         <img class="pic-2" src="images/img-2.jpg">
  9.                     </a>
  10.                     <div class="product-button-group">
  11.                         <a href="#" class="add-to-wishlist">Add to wishlist</a>
  12.                         <a href="#" class="quick-view">Quick view</a>
  13.                     </div>
  14.                 </div>
  15.                 <div class="product-content">
  16.                     <h3 class="title"><a href="#">Women's Blouse Top</a></h3>
  17.                     <div class="price">$25.00</div>
  18.                     <a href="#" class="add-to-cart">Add to Cart</a>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.         <div class="col-md-3 col-sm-6">
  23.             <div class="product-grid">
  24.                 <div class="product-image">
  25.                     <a href="#" class="image">
  26.                         <img class="pic-1" src="images/img-3.jpg">
  27.                         <img class="pic-2" src="images/img-4.jpg">
  28.                     </a>
  29.                     <span class="product-sale-label">Sale</span>
  30.                     <div class="product-button-group">
  31.                         <a href="#" class="add-to-wishlist">Add to wishlist</a>
  32.                         <a href="#" class="quick-view">Quick view</a>
  33.                     </div>
  34.                 </div>
  35.                 <div class="product-content">
  36.                     <h3 class="title"><a href="#">Men's Shirt</a></h3>
  37.                     <div class="price"><span>$35.00</span> $28.00</div>
  38.                     <a href="#" class="add-to-cart">Add to Cart</a>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.     </div>
  43. </div>
Скопировать код
CSS стиль
  1. .product-grid{ font-family: 'Source Sans Pro', sans-serif; }
  2. .product-grid .product-image{
  3.     position: relative;
  4.     overflow: hidden;
  5. }
  6. .product-grid .product-image a.image{ display: block; }
  7. .product-grid .product-image img{
  8.     width: 100%;
  9.     height: auto;
  10. }
  11. .product-image .pic-1{
  12.     backface-visibility: hidden;
  13.     transition: all .5s ease 0s;
  14. }
  15. .product-grid .product-image:hover .pic-1{
  16.     opacity: 0;
  17.     transform: translateX(-50%);
  18. }
  19. .product-image .pic-2{
  20.     width: 100%;
  21.     height: 100%;
  22.     backface-visibility: hidden;
  23.     opacity: 0;
  24.     position: absolute;
  25.     top: 0;
  26.     left: 50%;
  27.     transition: all .5s ease 0s;
  28. }
  29. .product-grid .product-image:hover .pic-2{
  30.     opacity: 1;
  31.     left: 0;
  32. }
  33. .product-grid .product-sale-label{
  34.     color: #fff;
  35.     background: #b79b6c;
  36.     font-size: 13px;
  37.     font-weight: 600;
  38.     text-align: center;
  39.     text-transform: uppercase;
  40.     padding: 5px 10px;
  41.     border-radius: 3px 10px 10px 3px;
  42.     position: absolute;
  43.     top: 10px;
  44.     left: 10px;
  45. }
  46. .product-grid .product-button-group{
  47.     font-size: 0;
  48.     width: 100%;
  49.     opacity: 0;
  50.     transform: perspective(600px) translateY(15px) rotateX(90deg);
  51.     transform-origin: bottom center;
  52.     position: absolute;
  53.     bottom: 15px;
  54.     left: 0;
  55.     transition: all 0.3s ease 0.1s;
  56. }
  57. .product-grid:hover .product-button-group{
  58.     opacity: 1;
  59.     transform: translateY(0) rotateX(0);
  60. }
  61. .product-grid .product-button-group a{
  62.     color: #fff;
  63.     background: #333;
  64.     font-size: 12px;
  65.     font-weight: 600;
  66.     text-transform: capitalize;
  67.     text-align: center;
  68.     width: calc(50% - 4px);
  69.     padding: 10px 5px;
  70.     margin: 0 2px;
  71.     border-radius: 3px;
  72.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  73.     display: inline-block;
  74.     transition: all 0.3s ease 0s;
  75. }
  76. .product-grid .product-button-group a:hover{ background-color: #b79b6c; }
  77. .product-grid .product-content{
  78.     padding: 12px 0 0;
  79.     position: relative;
  80. }
  81. .product-grid .title{
  82.     font-size: 20px;
  83.     font-weight: 500;
  84.     text-transform: capitalize;
  85.     margin: 0 0 5px;
  86. }
  87. .product-grid .title a{
  88.     color: #333;
  89.     transition: all 0.5s ease;
  90. }
  91. .product-grid .title a:hover{ color: #b79b6c; }
  92. .product-grid .price{
  93.     color: #b79b6c;
  94.     font-size: 18px;
  95.     font-weight: 600;
  96. }
  97. .product-grid .price span{
  98.     color: #999;
  99.     font-size: 17px;
  100.     font-weight: 500;
  101.     text-decoration: line-through;
  102.     margin-right: 2px;
  103. }
  104. .product-grid:hover .price{ opacity: 0; }
  105. .product-grid .add-to-cart{
  106.     color: #333;
  107.     font-size: 16px;
  108.     font-weight: 600;
  109.     opacity: 0;
  110.     position: absolute;
  111.     bottom: -5px;
  112.     left: 0;
  113.     transition: all 0.3s linear 0s;
  114. }
  115. .product-grid .add-to-cart:hover{
  116.     color: #b79b6c;
  117.     text-decoration: underline;
  118. }
  119. .product-grid:hover .add-to-cart{
  120.     opacity: 1;
  121.     bottom: 2px;
  122. }
  123. @media screen and (max-width:990px){
  124.     .product-grid{ margin: 0 0 30px; }
  125. }
Скопировать код

Сообщение слишком большое

Для просмотра Вам необходимо авторизироваться.
Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.

x

Похожие сообщения

Ответить

Магия Жалоба

1Рамка
Чтобы ответить, вам надо авторизироваться в системе Вход | Регистрация

Правила начислений  Разрешить ответные письма, чтобы напомнить автору

просм.1

подписок0

постов124

Опубликовать
Рейтинг за неделю за 24 часа
Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.