<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 ----------> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="mywrap"> <div class="col-sm-11"> <h3>Pizaa</h3> <h5>200INR</h5> <p>r sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</p> <img src="https://us.123rf.com/450wm/serezniy/serezniy1108/serezniy110801229/10383396-pizza-in-pan-isolated-on-white.jpg?ver=6" alt="Paris"> </div> <div class="col-sm-11 base"> <button>Buy Free here!</button> </div> </div> </div> <div class="col-md-4"> <div class="mywrap"> <div class="col-sm-11"> <h3>Pizaa</h3> <h5>200INR</h5> <p>r sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</p> <img src="https://us.123rf.com/450wm/serezniy/serezniy1108/serezniy110801229/10383396-pizza-in-pan-isolated-on-white.jpg?ver=6" alt="Paris"> </div> <div class="col-sm-11 base"> <button>Buy Free here!</button> </div> </div> </div> <div class="col-md-4"> <div class="mywrap"> <div class="col-sm-11"> <h3>Pizaa</h3> <h5>200INR</h5> <p>r sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</p> <img src="https://us.123rf.com/450wm/serezniy/serezniy1108/serezniy110801229/10383396-pizza-in-pan-isolated-on-white.jpg?ver=6" alt="Paris"> </div> <div class="col-sm-11 base"> <button>Buy Free here!</button> </div> </div> </div> </div> </div>

body{ background:#f9f9f9; } .row{ margin-bottom:50px; } .col-md-4{ margin-top:30px; padding:0px; } .col-sm-11{ border-radius:15px 15px 0px 0px; background: linear-gradient(#f02f1c, #c23932); box-shadow: -4px 12px 20px #00000061; } .col-sm-11.base{ background:white; border-radius:0px 0px 15px 15px; box-shadow: -4px 12px 20px #00000061; } .col-sm-11 h3{ color:white; position:relative; } .col-sm-11 p{ color:#f99593; } .col-sm-11 h5{ color:white; position:absolute; top:15px; right:10px; } img{ width:230px; height:auto; position:relative; right:-130px; -webkit-transition: right 0.5s; border:1px #d1362b solid iner; border-radius:70%; box-shadow: -4px 12px 20px #00000061; margin-bottom:50px } img:hover{ right:-100px; -webkit-transition: right 0.5s; transition-timing-function: linear; } button{ position:relative; margin-left:180px; border:2px red solid; background:white; border-radius:15px; padding:10px; color:#dd4335; font-weight:bold; margin:10px 10px 10px 10px; } button:hover{ background:#dd4335; color:white; -webkit-transition: color 0.5s; transition-timing-function: linear; }