Это эффект анимации переключения изображения при наведении курсора мыши css3
Краткое описание
Это эффект анимации переключения изображения при наведении курсора мыши css3. Когда специальный эффект наведен на изображение, оно будет скрыто в виде анимации и будет отображаться другое изображение.
Совместимость
Поделиться:
Краткое руководство Это эффект анимации переключения изображения при наведении курсора мыши css3. Когда специальный эффект наведен на изображение, оно будет скрыто в виде анимации и будет отображаться другое изображение. инструкцииПредставлено в HTML-файле. - <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
- <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
Скопировать код Структура HTML
- <div class="container">
- <div class="row">
- <div class="col-md-3 col-sm-6">
- <div class="product-grid">
- <div class="product-image">
- <a href="#" class="image">
- <img class="pic-1" src="images/img-1.jpg">
- <img class="pic-2" src="images/img-2.jpg">
- </a>
- <div class="product-button-group">
- <a href="#" class="add-to-wishlist">Add to wishlist</a>
- <a href="#" class="quick-view">Quick view</a>
- </div>
- </div>
- <div class="product-content">
- <h3 class="title"><a href="#">Women's Blouse Top</a></h3>
- <div class="price">$25.00</div>
- <a href="#" class="add-to-cart">Add to Cart</a>
- </div>
- </div>
- </div>
- <div class="col-md-3 col-sm-6">
- <div class="product-grid">
- <div class="product-image">
- <a href="#" class="image">
- <img class="pic-1" src="images/img-3.jpg">
- <img class="pic-2" src="images/img-4.jpg">
- </a>
- <span class="product-sale-label">Sale</span>
- <div class="product-button-group">
- <a href="#" class="add-to-wishlist">Add to wishlist</a>
- <a href="#" class="quick-view">Quick view</a>
- </div>
- </div>
- <div class="product-content">
- <h3 class="title"><a href="#">Men's Shirt</a></h3>
- <div class="price"><span>$35.00</span> $28.00</div>
- <a href="#" class="add-to-cart">Add to Cart</a>
- </div>
- </div>
- </div>
- </div>
- </div>
Скопировать код CSS стиль
|
Сообщение слишком большое
Для просмотра Вам необходимо авторизироваться. Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.
x
|