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*/
