02/12/2012, 06:43
|
 | | | Fecha de Ingreso: marzo-2006 Ubicación: España
Mensajes: 151
Antigüedad: 19 años, 7 meses Puntos: 0 | |
| Modificar efecto hover imagen
Tengo el efecto hover de las imágenes al que me gustaría darle una transición al efecto para que no pase tan rápido al negro. http://maggyvillarroel.com/
Añado el css para ver qué podemos hacer con él:
Código:
.mg_grid_wrap {
min-width: 200px;
width: auto;
margin: 20px auto;
}
.mg_grid_wrap .mg_container {
margin: auto;
width: 100% !important;
overflow: hidden;
}
.mg_container > div {
opacity: 0;
filter: alpha(opacity=0);
}
.mg_box {
float: left;
overflow: hidden;
}
.mg_box img {
display: block;
width: 100%;
}
.img_wrap {
overflow: hidden;
}
.img_wrap > div {
height: 100%;
left: 0px;
overflow: hidden;
top: 0px;
width: 100%;
position: absolute;
}
.img_wrap img {
max-width: 100%;
height: 100%;
}
.mg_transitions {
cursor: pointer;
}
.mg_box .thumb {
opacity: 0; /* hack to avoid IE troubles */
}
/* big overlay */
.img_wrap .overlays .overlay {
-webkit-transform: translate(-100%, -100%);
-moz-transform: translate(-100%, -100%);
-o-transform: translate(-100%, -100%);
-ms-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
cursor: pointer;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0.6;
}
.img_wrap:hover .overlays .overlay {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
/* cell more overlay */
.img_wrap .overlays .cell_more {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .6s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
box-shadow: 0px 0px 2px rgba(15,15,15, 0.5);
width: 130px;
height: 130px;
position: absolute;
right: -150px;
bottom: -150px;
display: block;
opacity: 1;
}
.img_wrap:hover .overlays .cell_more {
}
.img_wrap .overlays .cell_more span {
-webkit-transform: rotate(-45deg) scale(1.05);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg) scale(1.05);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 10px;
position: relative;
top: 56px;
cursor: pointer;
display: block;
height: 18px;
width: 18px;
}
/* overlay type identifier */
.img_wrap .overlays .cell_type {
-webkit-transform: translate(-100%, 0px);
-moz-transform: translate(-100%, 0px);
-o-transform: translate(-100%, 0px);
-ms-transform: translate(-100%, 0px);
transform: translate(-100%, 0px);
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .6s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
width: 100%;
height: 100%;
text-align: center;
opacity: 1;
position: absolute;
left: 0;
top: 0px;
display: block;
}
.img_wrap:hover .overlays .cell_type {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.mg_overlay_tit {
float:left;
margin-left:15px;
font-weight: bold;
display: block;
margin-top: 20px;
padding: 3px 5px;
text-shadow: 0px 0px 1px rgba(15, 15, 15, 0.3);
letter-spacing: 1px;
text-decoration: none;
}
/* FILTER */
.mg_filter > a {
display: inline-block;
cursor: pointer;
}
.mg_filter > a:hover {
text-decoration: none;
}
.mg_filter > span {
display: inline-block;
padding: 0 5px;
}
.mg_cats_selected {
font-weight: bold;
}
/* OPENED ITEM */
.lcwp_loading {
background: url(../img/loader.gif) no-repeat center center transparent !important;
}
.mg_item_load {
height: 74px;
width: 74px;
border-radius: 13px;
box-shadow: 0px 2px 5px rgba(10, 10, 10, 0.5);
position: fixed;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -37px;
background: url(../img/loader.gif) no-repeat center center;
z-index: 999999;
}
.mg_item_featured {
min-height: 150px;
background: url(../img/loader.gif) no-repeat center center transparent;
}
#mg_full_overlay_wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999990;
display: none;
}
#mg_full_overlay {
width: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 999995;
}
#mg_overlay_content {
min-width: 280px;
height: auto;
min-height: 30px;
margin: 60px auto;
opacity: 1;
box-shadow: 0px 2px 6px rgba(10, 10, 10, 0.5);
overflow: visible;
z-index: 999999;
padding: 40px 20px 20px;
}
.mg_cust_options {
list-style: none;
margin: 0;
padding: 5px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.mg_cust_options li {
padding: 2px 0;
}
.mg_cust_options span {
font-weight: bold;
padding-right: 3px;
}
.mg_item_title {
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
line-height: 20px;
}
#mg_close {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
-ms-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
height: 23px;
width: 23px;
display: block;
opacity: 0.5;
float: right;
margin-top: -30px;
margin-right: -3px;
background: url(../img/item_close.png) no-repeat center center transparent;
}
#mg_close:hover {
opacity: 1;
}
#mg_nav {
display: block;
opacity: 1;
float: left;
margin-right: -7px;
margin-top: -33px;
}
#mg_nav > div {
display: inline-block;
}
#mg_nav .mg_nav_prev span,
#mg_nav .mg_nav_next span {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
-ms-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
display: inline-block;
width: 12px;
height: 20px;
margin-top: 4px;
opacity: 0.5;
margin-right: 15px;
}
#mg_nav span:hover {
opacity: 1;
}
#mg_nav .mg_nav_prev span {
background: url(../img/item_prev.png) no-repeat left center transparent;
}
#mg_nav .mg_nav_next span {
background: url(../img/item_next.png) no-repeat left center transparent;
}
#mg_nav p {
float: right;
overflow: hidden;
margin: 0;
}
#mg_nav p span {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
-ms-transition: all .3s linear;
transition: all .3s linear;
-webkit-transform: translate(-100%, 2px);
-moz-transform: translate(-100%, 2px);
-o-transform: translate(-100%, 2px);
-ms-transform: translate(-100%, 2px);
transform: translate(-100%, 2px);
display: block;
opacity: 0;
}
#mg_nav:hover p span {
-webkit-transform: translate(0px, 2px);
-moz-transform: translate(0px, 2px);
-o-transform: translate(0px, 2px);
-ms-transform: translate(0px, 2px);
transform: translate(0px, 2px);
opacity: 1;
}
#mg_overlay_content .mg_item_featured,
#mg_overlay_content .mg_item_content > div,
#mg_overlay_content .mg_item_content > ul {
transition: all .7s linear;
-o-transition: all .7s linear;
-moz-transition: all .7s linear;
-webkit-transition: all .7s linear;
-ms-transition: all .7s linear;
}
#mg_socials {
margin-top: 15px;
float: left;
height: 25px;
}
#mg_socials ul {
list-style: none;
margin: 0;
padding: 0;
}
#mg_socials ul li {
margin-right: 5px;
}
#mg_socials ul li,
#mg_socials ul li span {
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
display: inline-block;
width: 25px;
height: 25px;
margin: 0 5px 0 0;
padding: 0;
}
#mg_socials ul li span {
opacity: 0.7;
}
#mg_socials ul li span:hover {
opacity: 1;
}
#mg_socials ul #mg_fb_share span {
background: url(../img/socials_sprite.png) no-repeat -75px -25px transparent;
}
#mg_socials ul #mg_fb_share span:hover {
background: url(../img/socials_sprite.png) no-repeat -75px 0px transparent;
}
#mg_socials ul #mg_tw_share span {
background: url(../img/socials_sprite.png) no-repeat -50px -25px transparent;
}
#mg_socials ul #mg_tw_share span:hover {
background: url(../img/socials_sprite.png) no-repeat -50px 0px transparent;
}
__________________
Diseñadora y Desarrolladora Web Freelance |