Material transition for product thumb hover that serves to revewal product info.
A Pen by Hans Engebretsen on CodePen.
<ul> | |
<li class="prod-thumb"> | |
<img src="https://www.66north.com/media/1867/W11418-framan.jpg?width=380&height=400&mode=crop&quality=90&scale=both&bgcolor=f5f4f0" alt="" /> | |
<div class="prod-info"> | |
<h4 class="prod-title">Women's Jacket</h4> | |
<div class="buy-section clearfix"> | |
<h3 class="prod-price"><sup>$</sup>150</h3> | |
<a href="#product" class="button">Buy Now</a> | |
</div> | |
</div> | |
</li> | |
<li class="prod-thumb"> | |
<img src="https://www.66north.com/media/2090/k11177-e.jpg?width=760&height=800&mode=crop&quality=65&scale=both&bgcolor=f5f4f0" alt="" /> | |
<div class="prod-info"> | |
<h4 class="prod-title">Snowy Hat</h4> | |
<div class="buy-section clearfix"> | |
<h3 class="prod-price"><sup>$</sup>40</h3> | |
<a href="#product" class="button">Buy Now</a> | |
</div> | |
</div> | |
</li> | |
<li class="prod-thumb"> | |
<img src="https://www.66north.com/media/2303471/w12704-890.jpg?width=320&quality=90" alt="" /> | |
<div class="prod-info"> | |
<h4 class="prod-title">Men's Jacket</h4> | |
<div class="buy-section clearfix"> | |
<h3 class="prod-price"><sup>$</sup>400</h3> | |
<a href="#product" class="button">Buy Now</a> | |
</div> | |
</div> | |
</li> | |
</ul> |
Material transition for product thumb hover that serves to revewal product info.
A Pen by Hans Engebretsen on CodePen.
@import "compass/css3"; | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,300,600,700,800); | |
@mixin clearfix { | |
&:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
} | |
* { | |
box-sizing:border-box; | |
} | |
body { | |
font-family:'Open-Sans', sans-serif; | |
color: lighten(black, 10%); | |
background-color: rgba(darken(red, 37%), .1); | |
} | |
h4 { | |
color:white; | |
text-transform:uppercase; | |
letter-spacing:.1em; | |
font-weight:100; | |
text-shadow:0 1px 0 #ac1c21; | |
font-size:2em; | |
} | |
li { | |
list-style:none; | |
float:left; | |
padding:10px; | |
} | |
.prod-thumb { | |
position:relative; | |
cursor:pointer; | |
overflow:hidden; | |
min-width:250px; | |
max-width:33%; | |
border-radius:3px; | |
box-shadow:none; | |
transition:all 200ms ease-in-out, box-shadow 100ms; | |
img { | |
width:100%; | |
} | |
&:after { | |
content:"+"; | |
text-shadow:0 1px 0 #AC1C1F; | |
width:35px; | |
color:darken(red, 20%); | |
font-size:30px; | |
text-indent:8px; | |
line-height:29px; | |
height:35px; | |
position:absolute; | |
background-color:rgba(#dc3b41, 1); | |
display:block; | |
border-radius:50%; | |
transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
top:0; | |
right:0; | |
} | |
&:hover { | |
padding:0; | |
transition:all 200ms ease-in-out, box-shadow 0ms 200ms; | |
box-shadow:0 2px 3px 2px rgba(black, .3); | |
&:after { | |
width:200%; | |
height:200%; | |
top:50%; | |
left:50%; | |
margin-left:-100%; | |
margin-top:-100%; | |
border-radius:50%; | |
background-color:rgba(#dc3b41, .8); | |
transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); | |
z-index:0; | |
} | |
.buy-section { | |
background-color:rgba(#dc3b41, 1); | |
} | |
h4, h3, .buy-section { | |
opacity:1; | |
transition:opacity 150ms 200ms ease-in-out; | |
} | |
} | |
} | |
.prod-info { | |
transition:all 200ms; | |
position:absolute; | |
top:0; | |
left:0; | |
z-index:1; | |
width:100%; | |
height:100%; | |
display:block; | |
padding:10px; | |
h4, h3 { | |
text-align:center; | |
opacity:0; | |
transition:opacity 100ms ease-in-out; | |
margin:15px; | |
} | |
h4 { | |
margin-top:30px; | |
} | |
h3 { | |
font-weight:100; | |
color:darken(red, 20%); | |
-webkit-font-smoothing: antialiased; | |
font-size:2em; | |
float:left; | |
} | |
} | |
.buy-section { | |
opacity:0; | |
padding-top:10px; | |
position:absolute; | |
bottom:0px; | |
background-color:rgba(#dc3b41, 0); | |
left:0; | |
width:100%; | |
} | |
.clearfix { | |
@include clearfix; | |
} | |
.buy-section { | |
border-top:1px solid darken(red, 20%); | |
display:block; | |
margin-top:10px; | |
padding:0px 20px; | |
} | |
.button { | |
float:right; | |
text-align:center; | |
color:darken(white,10%); | |
width:40%; | |
border-radius:5px; | |
margin-top:10px; | |
text-shadow:0 1px 0 #ac1c21; | |
border:1px solid #AC1C1F; | |
background-color:#dc3b41; | |
font-size:.75em; | |
text-transform:uppercase; | |
letter-spacing:.02em; | |
display:inline-block; | |
text-decoration:none; | |
padding:15px 10px; | |
} |