Foros del Web » Creando para Internet » CSS »

Cambiar efecto sobre imágen

 Estas en el tema de Cambiar efecto sobre imágen en el foro de CSS en Foros del Web. Tengo el siguiente efecto sobre la imágen en http://maggyvillarroel.com/ me gustaría cambiarlo por una simple opacidad negra sobre la imágen al pasar el ratón sobre ...
  #1 (permalink)  
Antiguo 01/12/2012, 05:34
Avatar de YolandaGC  
Fecha de Ingreso: marzo-2006
Ubicación: España
Mensajes: 151
Antigüedad: 18 años, 8 meses
Puntos: 0
Cambiar efecto sobre imágen
Tengo el siguiente efecto sobre la imágen en http://maggyvillarroel.com/
me gustaría cambiarlo por una simple opacidad negra sobre la imágen al pasar el ratón sobre ella.
__________________
Diseñadora y Desarrolladora Web Freelance
  #2 (permalink)  
Antiguo 01/12/2012, 07:38
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: Cambiar efecto sobre imágen
¿Tiene que ser con javascript?

El efecto es muy simple, y se puede encarar de varias formas.
Una es meter la imagen en una caja (puede ser un span) que tenga fondo negro, y con CSS puro o asistido por JS se le baja la opacidad para que se transparente contra el negro. La ventaja de éste es que solamente se usa código y las imágenes.
Otra es usar más capas, una contenedora para cada imagen (como el caso anterior), adentro la imagen y otra imagen más por delante que es un*.png o *.gif negro semitransparente; lo que se hace es mostrar/ocultar esa imagen al pasar el puntero. Aunque en este caso, también se puede reemplazar el velado por una capa creada con HTML/CSS que tenga un color negro semitransparente, y nos ahorramos la segunda imagen. También la foto puede estar como fondo del contenedor, y nos ahorramos una capa.

En fin, hay muchas maneras de maquetarlo, y con :hover o mouseover; mouseout (aplicando el CSS vía javascript) hacés la animación.
  #3 (permalink)  
Antiguo 02/12/2012, 06:16
Avatar de YolandaGC  
Fecha de Ingreso: marzo-2006
Ubicación: España
Mensajes: 151
Antigüedad: 18 años, 8 meses
Puntos: 0
Respuesta: Cambiar efecto sobre imágen
Cita:
Iniciado por furoya Ver Mensaje
¿Tiene que ser con javascript?

El efecto es muy simple, y se puede encarar de varias formas.
Una es meter la imagen en una caja (puede ser un span) que tenga fondo negro, y con CSS puro o asistido por JS se le baja la opacidad para que se transparente contra el negro. La ventaja de éste es que solamente se usa código y las imágenes.
Otra es usar más capas, una contenedora para cada imagen (como el caso anterior), adentro la imagen y otra imagen más por delante que es un*.png o *.gif negro semitransparente; lo que se hace es mostrar/ocultar esa imagen al pasar el puntero. Aunque en este caso, también se puede reemplazar el velado por una capa creada con HTML/CSS que tenga un color negro semitransparente, y nos ahorramos la segunda imagen. También la foto puede estar como fondo del contenedor, y nos ahorramos una capa.

En fin, hay muchas maneras de maquetarlo, y con :hover o mouseover; mouseout (aplicando el CSS vía javascript) hacés la animación.
Hola furoya y muchas gracias por contestar. Te explico: se trata de un plugin para wordpress en el que creo,mirándolo, que está hecho en css3: con rotate para el efecto hover.
No estoy segura...a ver si me lo puedes confirmar.
El caso es quitarle el efecto de izquierda derecha al hover y dejárselo solo con un negro transparente.
__________________
Diseñadora y Desarrolladora Web Freelance
  #4 (permalink)  
Antiguo 02/12/2012, 06:43
Avatar de YolandaGC  
Fecha de Ingreso: marzo-2006
Ubicación: España
Mensajes: 151
Antigüedad: 18 años, 8 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
  #5 (permalink)  
Antiguo 02/12/2012, 07:55
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: Cambiar efecto sobre imágen
De nada. No hace falta citar todo el mensaje anterior, y menos si es el inmediato anterior. Por lo menos después hiciste una buena descripción del caso, hay gente que detrás de la enorme cita pone un "No entiendo" o un "No funciona", y ahí los tenemos que ajusticiar.

No tengo idea de lo que es un plugin de wordpress, sólo te puedo orientar para hacer el efecto, que es muy simple.
CSS3 te ayuda en animaciones más complejas, pero si es nada más que "oscurecer" la foto, el viejo :hover CSS2.1 alcanza y sobra.

El desplazamiento de la capa debe ser un transition (otros efectos podrían ser animation, transform o hasta keyframes, pero si no te interesan ahora, los ves más tarde con tiempo.)




P.D.: Bueno. No había necesidad de repetir el tema. Podía seguir acá y pedíamos el traslado.

Modificar efecto hover imagen

Y la transición suave se le da con transition. Hay mil ejemplos en la web y en este Foro, por eso no pongo otro.

Por supuesto, solamente se va a ver en los navegadores que soporten CSS3 (con o sin prefijo).

Una recomendación, en ese otro tema (que seguramente juntarán) poné un ejemplo completo de lo que tenés, con una copia del CSS no hacemos nada. Y cuando digo "completo" no es copiar y pegar todo lo que encontrés sino una versión simple, solamente de lo que precisás.
Aunque me sospecho que no tenés mucha idea de CSS; vas a tener que aprender un poco primero.

Empezá a practicar con una maqueta simple, un span con fondo negro y adentro la foto, con opacidad 1.0 . Después con :hover le cambiás la opacidad a 0.5 . Y no te va a andar en versiones viejas de IE, ahí te tenés que olvidar de CSS y morir en javascript.

Cuando lo tenés funcionando, empezás a ver cómo es la transición. No podés tener problemas, pero si te aparecen venís con ese código y lo vemos.
  #6 (permalink)  
Antiguo 02/12/2012, 08:07
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Modificar efecto hover imagen
Lo que no veo es el :hover en tu código.

Transiciones con CSS puedes hacerlo usando CSS3 con transition. Lo casi más básico es algo así:

Código CSS: 
Ver original
  1. elemento {
  2.   color: black;
  3.   transition: color 2s;
  4. }
  5.   elemento:hover {
  6.     color: red;
  7.   }

Sería apropiado añadir los prefijos de los distintos navegadores para lograr un mayor soporte por parte de estos.
  #7 (permalink)  
Antiguo 03/12/2012, 03:21
Avatar de YolandaGC  
Fecha de Ingreso: marzo-2006
Ubicación: España
Mensajes: 151
Antigüedad: 18 años, 8 meses
Puntos: 0
Respuesta: Modificar efecto hover imagen
Gracias bonez, lo voy a probar!
Cualquier cosa,os cuento,
un saludo.
__________________
Diseñadora y Desarrolladora Web Freelance
  #8 (permalink)  
Antiguo 03/12/2012, 06:13
Avatar de tunait
Moderadora
  
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 2 meses
Puntos: 381
Respuesta: Cambiar efecto sobre imágen
He unido el hilo que tenías abierto en javascript para tenerlo todo junto en un mismo tema ;)
__________________
Javascript Códigos - Bambú difunde

Etiquetas: efecto, hover, imágen, modificar, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:25.