(+84) 236.3827111 ex. 402

Tạo chức năng Slide Porfolio chỉ với CSS3


HTML

<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="1.jpg" alt="image1"/>
div>
div>
<h4>Boosted Boardh4>
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%);
}