Forked from Chris Steurer's Pen Product Hover Display Cards.
A Pen by A Non Ymous on CodePen.
<ul class="catCardList"> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$329.00</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>This situation</li> | |
<li>That situation</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="#">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$299.99</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>Eating Bacon</li> | |
<li>Cooking Bacon</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="$">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$44.99</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>Eating Bacon</li> | |
<li>Cooking Bacon</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="#">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$44.99</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>Eating Bacon</li> | |
<li>Cooking Bacon</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="#">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$169.99</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>Eating Bacon</li> | |
<li>Cooking Bacon</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="#">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
<li class="catCardList"> | |
<div class="catCard"><a href="#"><img src="http://placehold.it/221x200" alt=""></a> | |
<div class="lowerCatCard"> | |
<h3>Product Name</h3> | |
<div class="startingPrice">Prices Starting At <span>$174.99</span></div> | |
<p>Bacon ipsum dolor sit amet hamburger doner kielbasa beef ribs, frankfurter prosciutto tri-tip pig turducken tenderloin filet mignon. Frankfurter chuck fatback venison pastrami sirloin. Rump tongue boudin meatloaf venison ham prosciutto.</p> | |
<h4>Best Used For:</h4> | |
<ul> | |
<li>Eating Bacon</li> | |
<li>Cooking Bacon</li> | |
</ul> | |
<div id="catCardButton" class="button"><a href="#">Shop Now</a></div> | |
</div> | |
</div> | |
</li> | |
</ul> |
Forked from Chris Steurer's Pen Product Hover Display Cards.
A Pen by A Non Ymous on CodePen.
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700); | |
body { | |
font-family:'Roboto', Helvetica, Arial, sans-serif; | |
font-weight:300; | |
} | |
h3 { | |
font-size: 1.3em; | |
margin:0; | |
} | |
p{ | |
font-size:0.9em; | |
} | |
/* Hover Card | |
.......................................................................*/ | |
div.catCard { | |
border: solid 5px #e9e9e9; | |
background: #d8d8d8; | |
width: 221px; | |
height: 400px; | |
display: block; | |
position: relative; | |
overflow: hidden; | |
} | |
div.lowerCatCard { | |
position: absolute; | |
background: #e9e9e9; | |
padding: 5px 5px; | |
height: 200px; | |
-webkit-transition: all 0.6s ease; | |
-moz-transition: all 0.6s ease; | |
-o-transition: all 0.6s ease; | |
transition: all 0.6s ease; | |
} | |
div.lowerCatCard:hover { | |
opacity: 0.95; | |
bottom: 0; | |
height: 390px; | |
} | |
div.catCard div.lowerCatCard { | |
left: 0; | |
bottom: -3%; | |
} | |
div.catCard:hover div.lowerCatCard { | |
bottom: 0; | |
} | |
li.catCardList { | |
width:225px; | |
display: inline-block; | |
margin-right: 19px; | |
margin-top: 25px; | |
} | |
li.catCardList-last { | |
margin-right: 0; | |
width:225px; | |
display: inline-block; | |
} | |
ul.catCardList { | |
margin: 0; | |
} | |
#catCardButton { | |
position: absolute; | |
width: 190px; | |
bottom: 5px; | |
-webkit-transition: all 0.6s ease; | |
-moz-transition: all 0.6s ease; | |
-o-transition: all 0.6s ease; | |
} | |
div.lowerCatCard:hover #catCardButton { | |
bottom: 5px; | |
} | |
.startingPrice span { | |
font-size: 16px; | |
color: #c90c12; | |
font-weight: 300; | |
} | |
div.startingPrice { | |
margin-bottom: 5px; | |
color: #000; | |
font-weight: 300; | |
} | |
.catCard img { | |
border: 1px solid #dddddd; | |
width: 219px; | |
height: 198px; | |
} | |
.catCard img:hover { | |
border: 1px solid #bababa; | |
} | |
/* Button | |
.......................................................................*/ | |
.button { | |
cursor: pointer; | |
font-size: 14px !important; | |
color: #ffffff; | |
padding: 7px 10px !important; | |
text-decoration: none !important; | |
text-transform: uppercase !important; | |
letter-spacing: 0 !important; | |
background: #000; | |
border: none; | |
border-bottom: solid 1px #c90c12; | |
text-align: center; | |
margin-top: 10px; | |
} | |
.button:hover { | |
background-color: #c90c12; | |
border: none; | |
border-bottom: solid 1px #000; | |
transform: scale(1.02); | |
-webkit-transform: scale(1.02); | |
-moz-transform: scale(1.02); | |
-o-transform: scale(1.02); | |
-ms-transform: scale(1.02); | |
} | |
.button:active { | |
background: #000; | |
} | |
.button a { | |
color: #ffffff; | |
padding: 7px 30px !important; | |
} | |
.button a:hover { | |
color: #ffffff; | |
} | |
.button:hover { | |
color: #fff; | |
} |