<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/elmahdim/pen/pIqlh?depth=everything&order=popularity&page=19&q=product&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
}
body {
font: 14px/18px'OpenSans-Bold', sans-serif;
}
ul {
list-style: none;
}
.wrapper {
width: 700px;
margin: 20px auto;
}
/* products */
.products {
margin: 40px 0;
overflow: hidden;
border-left: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}
.products ul li p {
display: none;
}
.products ul.list li p {
display: block;
}
.products .list li {
float: none;
display: block;
width: 691px;
height: 245px;
}
.products .list li .titlePro {
float: left;
position: relative;
padding: 45px 0 20px 0;
width: auto;
height: auto;
border: 0;
background: transparent;
}
.products .list li:hover .titlePro {
border: 0;
}
.products .list li .titlePro a {
padding: 0 0 5px 0;
}
.products .list li .titlePro .descTitle {
color: #333;
text-transform: none !important;
padding: 10px 0 0 0;
}
.products .list li .titlePro p {
color: #333;
text-transform: none !important;
width: 440px;
}
.products .list li .wrapimg {
height: 243px;
float: left;
border-right: 1px solid #d9d9d9;
margin: 0 13px 0 0;
width: 230px;
position: relative;
}
.products .list li .wrapimg img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.products .list li .addPro {
height: 243px;
border-bottom: 1px solid rgba(51, 51, 51, 1);
}
.products .list li .addPro a {
margin: 45% auto auto 40px;
}
.products.catalog {
margin: 80px auto 40px auto;
}
.products.category {
margin: 10px 0;
width: 693px;
float: left;
}
.products ul li {
float: left;
margin: 0;
padding: 0;
width: 230px;
height: 244px;
position: relative;
border-top: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
}
.products ul li img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.products ul li:hover .addPro, .products ul li:hover .addPro a {
opacity: 1;
}
.products ul li:hover .titlePro {
border: 1px solid rgba(51, 51, 51, 1);
border-top: 0;
}
.products ul li:hover .titlePro a {
color: #010101;
}
.addPro {
position: absolute;
top: 0;
left: 0;
width: 228px;
height: 186px;
border: 1px solid rgba(51, 51, 51, 1);
border-bottom: 0;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
-webkit-transition: opacity 0s;
-moz-transition: opacity 0s;
-o-transition: opacity 0s;
}
.addPro a {
text-decoration: none;
display: inline-block;
width: 157px;
height: 40px;
margin: 100px auto auto 40px;
background-color: #333;
text-align: center;
font: 14px/40px'OpenSans-Italic', sans-serif;
color: #fff;
opacity: 0;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
}
.titlePro {
position: absolute;
bottom: 0;
left: 0;
width: 208px;
height: 36px;
border: 1px solid rgba(51, 51, 51, 0);
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
border-top: 0;
padding: 10px;
background: rgba(255, 255, 255, 0.5);
}
.titlePro p, .titlePro span, .titlePro a {
text-transform: uppercase;
}
.titlePro a {
color: #003f75;
text-decoration: none;
display: block;
}
.titlePro span {
color: #a20000;
}
.view p { top: 5px; margin: 0 10px 0 0; }
.view p,
.view a {
float: left;
display: inline-block;
text-decoration: none;
position: relative;
}
.icon-grid {
background: url("http://cdn1.iconfinder.com/data/icons/jigsoar-icons/16/_thumbnail.png") no-repeat 0 0;
height: 16px;
width: 16px;
top: 7px;
}
.icon-list {
background: url("http://cdn3.iconfinder.com/data/icons/other-icons/48/list-32.png") no-repeat 0 0;
height: 32px;
width: 32px;
}
</style></head><body>
<div class="wrapper">
<div class="view">
<p>View as:</p>
<a href="#" class="icon-grid"></a>
<a href="#" class="icon-list"></a>
</div>
<div class="products category">
<ul class="">
<li>
<div class="wrapimg">
<img src="https://www.comparison.com.au/system/image_library/22181/Samsung_EC-ST500.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro"> <a href="javascript:;">Samsung EC ST500</a>
<span>$ 145.00</span>
<p class="descTitle">Detailed item information</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</li>
<li>
<div class="wrapimg">
<img src="https://www.cameras.co.uk/pictures/Sony-DSC-T7.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro">
<a href="javascript:;">Sony DSC-T7</a>
<span>$ 200.00</span>
<p class="descTitle">Detailed item information</p>
<p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="wrapimg">
<img src="https://www.clubdeamigos.com.ar/contenido/18_3_2013_6604668/bjc176jpkli323_2240153_thumb.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro">
<a href="javascript:;">NOTICIAS - Vida Android</a>
<span>$ 150.00</span>
<p class="descTitle">Detailed item information</p>
<p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="wrapimg">
<img src="https://www.clubdeamigos.com.ar/contenido/18_3_2013_6604668/bjc176jpkli323_2240153_thumb.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro">
<a href="javascript:;">NOTICIAS - Vida Android</a>
<span>$ 150.00</span>
<p class="descTitle">Detailed item information</p>
<p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="wrapimg">
<img src="https://www.comparison.com.au/system/image_library/22181/Samsung_EC-ST500.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro"> <a href="javascript:;">Samsung EC ST500</a>
<span>$ 145.00</span>
<p class="descTitle">Detailed item information</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</li>
<li>
<div class="wrapimg">
<img src="https://www.cameras.co.uk/pictures/Sony-DSC-T7.jpg">
<div class="addPro"> <a href="javascript:;">+ Add to shopping cart</a>
</div>
</div>
<div class="titlePro">
<a href="javascript:;">Sony DSC-T7</a>
<span>$ 200.00</span>
<p class="descTitle">Detailed item information</p>
<p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/*
@ElmahdiMahmoud
May 19, 2013
*/
$(".view a").on('click', function(){
$('.products ul').toggleClass('list');
return false;
});
//# sourceURL=pen.js
</script>
</body></html>
