Portfolio slider using CSS only

HTML
<center class="titleBlock"> <h1 class="Sitetitle">Our Works</h1> <p> <b>Hover the Image to see the effect</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </center> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-1"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <center> <div class="displayWrapper"> <div class="displayBox"> <img src="http://aarvic.com/images/DUMMY/FullView1.png" alt="image1"/> </div> </div> <h4>Boosted Board</h4> </center> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <center> <div class="displayWrapper"> <div class="displayBox"> <img src="http://aarvic.com/images/DUMMY/1.jpg" alt="image1"/> </div> </div> <h4>Special App</h4> </center> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <center> <div class="displayWrapper"> <div class="displayBox"> <img src="http://aarvic.com/images/DUMMY/5.png" alt="image1"/> </div> </div> <h4>Taicos Kitchen</h4> </center> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <center> <div class="displayWrapper"> <div class="displayBox"> <img src="http://aarvic.com/images/DUMMY/3.jpg" alt="image1"/> </div> </div> <h4>Medical Prescription</h4> </center> </div> </div> </div>
CSS
html , body { height:100%; width:100%; background:#f1f1f1; font-family: 'Raleway', sans-serif; overflow-x:hidden; } .titleBlock { width:70%; margin-left:15%; } .Sitetitle:before { content:""; width:50px; height:2px; background:#000; position: absolute; margin-top:18px; margin-left:-60px; } .Sitetitle:after { content:""; width:50px; height:2px; background:#000; position: absolute; margin-top:18px; margin-left:8px; } .displayWrapper { box-shadow: 0 0 15px rgba(0,0,0,0.6); padding: 10px; width:320px; margin-top:20px; } .displayBox { width:300px; height:300px; overflow: hidden; } .displayBox img { width:100%; -webkit-transition: all 5s ease; transition: all 5s ease; position:relative; } .displayBox img:hover { cursor:pointer; transform: translateY(-83.7%); }
JAVASCRIPT
/* No need of javascript today*/
Expand for more options Login