$(document).ready(function() {
$("div.item").click(function() {
$("div.info").css("display", "none");
$(this).find("+ div.info").css("display", "block").hide().slideDown();
});
$(".fechar").click(function() {
$(".info").slideUp("400");
});
});
img {
height: auto;
max-width: 100%;
}
.fechar {
position: absolute;
top: 30px;
right: 30px;
font-size: 30px;
}
div.item {
background-color: blue;
border: red 5px solid;
display: inline-block;
height: auto;
width: 200px;
}
div.info {
background-color: grey;
float: left;
clear: both;
width: 100%;
height: auto;
display: none;
position: relative;
}
<div class="container">
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/500"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/501"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/502"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/503"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/504"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/507"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/508"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/509"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/510"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
<div class="item">
<img src="https://unsplash.it/200/200/?random"/></div><divclass="info">
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5">
<img src="https://unsplash.it/511"></div><divclass="col-lg-7 col-md-7 col-sm-7">
<h3>SHOPPING DA GÁVEA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque tempus mollis. Nunc ut imperdiet arcu. Sed sagittis dui non faucibus ultricies. Maecenas et dui non neque elementum varius nec et massa. Cras nec rhoncus leo. Duis nec
iaculis magna. Sed imperdiet, arcu ut imperdiet pharetra, quam enim lobortis felis, nec sagittis massa sem scelerisque nibh.</p>
</div>
</div>
<span class="fechar">x</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>