CSS: Эффект наведения на карточку товара
Интересный эффект при наведении на карточку товара, используя чистый CSS3. Описание товара выезжает из под картинки.
HTML
<div class="wrapper"> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/design_128.png?raw=true"> <h3>Design</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/code_128.png?raw=true"> <h3>Code</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/launch_128.png?raw=true"> <h3>Launch</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> </div>
CSS
body{ margin: 0; padding: 0; min-height: 100vh; background: #333; display: flex; justify-content: center; align-items: center; font-family: consolas; } .wrapper{ width: 1000px; position: relative; display: flex; justify-content: space-between; } .wrapper .card{ position: relative; cursor: pointer; } .wrapper .card .face{ width: 300px; height: 200px; transition: 0.5s; } .wrapper .card .face.face1{ position: relative; background: #333; display: flex; justify-content: center; align-items: center; z-index: 1; transform: translateY(100px); } .wrapper .card:hover .face.face1{ background: #ff0057; transform: translateY(0); } .wrapper .card .face.face1 .content{ opacity: 0.2; transition: 0.5s; } .wrapper .card:hover .face.face1 .content{ opacity: 1; } .wrapper .card .face.face1 .content img{ max-width: 100px; } .wrapper .card .face.face1 .content h3{ margin: 10px 0 0; padding: 0; color: #fff; text-align: center; font-size: 1.5em; } .wrapper .card .face.face2{ position: relative; background: #fff; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); transform: translateY(-100px); } .wrapper .card:hover .face.face2{ transform: translateY(0); } .wrapper .card .face.face2 .content p{ margin: 0; padding: 0; } .wrapper .card .face.face2 .content a{ margin: 15px 0 0; display: inline-block; text-decoration: none; font-weight: 900; color: #333; padding: 5px; border: 1px solid #333; } .wrapper .card .face.face2 .content a:hover{ background: #333; color: #fff; }