5/05/2016

Olá olá

- Código #1

/* Destaques
------------------------------------------------*/
#destaque {
margin:5px 0px;
width: 800px;
}

.view {
   width: 240px;
   height: 180px;
   margin: 0px 10px 0px 0px !important;

float: left;
overflow: hidden;
position: relative;
text-align: center;
background: none repeat scroll 0% 0% transparent;
}

.view .mask,.view .content {
   max-width: 240px;
   width: 240px;
   height: 180px;

position: absolute;
overflow: hidden;
top: 0;
left: 0;
}

.view img {
   max-width:240px;

display: block;
position: relative;
}

.view-first img {
    width:240px;

-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.view-first .mask {
    background: rgba(255, 255, 255, 0.5);
    width:240px;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.view p {
     font-size: 16px;
     font-weight: 100;
     color: #494544;
     padding: 120px 0px 0px;
     font-family: "Lato", sans-serif;
     text-transform: uppercase;

position: relative;
text-align: center;
text-decoration: none;

}




.view a.info {
   display: inline-block;
   text-decoration:none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
 filter: alpha(opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        opacity:1;
        -moz-opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
     filter: alpha(opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        opacity:1;
        -moz-opacity: 1;
    transform: translateY(0px);
}


.view-first a {
   text-decoration: none;
}

.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}


.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}