.gambar{



cursor:pointer;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.8 ease;
   -moz-transition:all 0.8 ease;
     -o-transition:all 0.8 ease;
        transition:all 0.8 ease;
}
.gambar img{

}
#text{
position:absolute;
top:0;
left:0;
background:rgba(219, 127, 8, 0.7);
width:100%;
height:100%;
opacity:0;
/*transition*/
-webkit-transition:all 1s ease;
   -moz-transition:all 1s ease;
     -o-transition:all 1s ease;
        transition:all 1s ease;
}

#text:hover{
opacity:1;
}
.efek:hover img{
/*transform*/
-webkit-transform:scale(1.1);
   -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
     -o-transform:scale(1.1);
        transform:scale(1.1);
}
.efek h3{
color:#FFF;
background:#000;
padding:10px 0;
/*transform*/
-webkit-transform:translateY(-100px);
   -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
     -o-transform:translateY(-100px);
        transform:translateY(-100px);
opacity:0;
/*transition*/
-webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
     -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
}
.efek:hover h3{
opacity:1;
/*transform*/
-webkit-transform:translateY(0px);
   -moz-transform:translateY(0px);
    -ms-transform:translateY(0px);
     -o-transform:translateY(0px);
        transform:translateY(0px);
}


.efek2 h5{
color:#FFF;
background:#000;
padding:20px;
margin: auto;
line-height: 15px;
/*transform*/
-webkit-transform:translateY(-100px);
   -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
     -o-transform:translateY(-100px);
        transform:translateY(-100px);
opacity:0;
/*transition*/
-webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
     -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
}
.efek2:hover h5{
opacity:1;
/*transform*/

}

#text p{
position:relative;
top:-10px;
}
#text a{
background:#019875;
padding:8px 15px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
text-decoration:none;
color:black;
}
#text a:hover{
background:#f00;
/*transition*/
-webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
     -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
}
.efek p{
/*transform*/
-webkit-transform:translateY(100px);
   -moz-transform:translateY(100px);
    -ms-transform:translateY(100px);
     -o-transform:translateY(100px);
        transform:translateY(100px);
opacity:0;
/*transition*/
-webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
     -o-transition:all 0.5s ease;
        transition:all 0.5s ease;
}
.efek:hover p{
opacity:1;
/*transform*/
-webkit-transform:translateY(0px);
   -moz-transform:translateY(0px);
    -ms-transform:translateY(0px);
     -o-transform:translateY(0px);
        transform:translateY(0px);
}