CSS - Problemas con hover imagebuttons

   
Vista:

Problemas con hover imagebuttons

Publicado por juanmuirot15 (2 intervenciones) el 19/04/2015 05:55:14
Hola a todos,

Soy principiante en esto del diseño de páginas web, y quería preguntarles una duda que me surgió realizando mi página web. Para mostrar precisamente cual es mi problema, he subido un video:


El problema es el siguiente: yo tengo unas imágenes que cuando le paso el mouse por encima, cambia de color, como se muestra en el video. El tema está en que cuando le paso por primera vez el mouse por encima, se que corren las imágenes hacia la izquierda e inmediatamente vuelven a su lugar. Lo que quiero es que las imágenes se queden quietas en su lugar. El código que tengo hecho es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="pag1.css">
	</head>
	<body>
		<div id="cabezera">
			<div id="subdivision1">
				<a href="#"><img src="reddit_dark.png" class="social" id="reddit"></a>
				<a href="#"><img src="youtube_dark.png" class="social" id="youtube"></a>
				<a href="#"><img src="google_dark.png" class="social" id="google"></a>
				<a href="#"><img src="twitter_dark.png" class="social" id="twitter"></a>
				<a href="#"><img src="facebook_dark.png" class="social" id="facebook"></a>
			</div>
		</div>
 
	</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    #cabezera{
        background-color: #393939;
        height: 90px;
        width: 1024px;
    }
 
    #cabezera img{
        margin-left: 7px;
        float: left;
    }
 
    #subdivision1{
        height: 45px;
        width: 400px;
        float: right;
    }
 
    #cabezera .social{
        margin-top: 10px;
        margin-right: 10px;
        float: right;
    }
 
    #cabezera input{
        float: right;
        margin-top: 11.5px;
        margin-right: 10px;
        height: 25px;
    }
 
    #reddit:hover{
        content:url(reddit_active.png);
    }
 
    #twitter:hover{
        content:url(twitter_active.png);
    }
 
    #facebook:hover{
        content:url(facebook_active.png);
    }
 
    #google:hover{
        content:url(google_active.png);
    }
 
    #youtube:hover{
        content:url(youtube_active.png);
    }

Además, he intentado hacerle un efecto de transición, entre una imagen y otra, que vaya jugando con la opacidad, así, mientras desaparece el boton oscuro cuando le paso el mouse por encima, aparece progresivamente la otra imagen. Como sería el código para que se pueda hacer el efecto de transición?

Les agradezco desde ya su ayuda!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

Problemas con hover imagebuttons

Publicado por Angel Komander (54 intervenciones) el 19/04/2015 08:36:21
no lo tienes subido a alguna web amigo? o si no pasame la web por .rar con imagenes y todo, para poder ayudarte mejor ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problemas con hover imagebuttons

Publicado por xve (349 intervenciones) el 19/04/2015 10:52:23
Hola Juan, creo que tu problema es que no tienes definido un ancho para las imagenes... prueba a añadir este estilo:

1
.social {width:24px;height:24px;}

No se exactamente si es ese el tamaño de las imágenes...

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problemas con hover imagebuttons

Publicado por juanmuirot15 (2 intervenciones) el 19/04/2015 13:29:02
Hola xve y Angel Komander,

Muchisimas gracias por sus respuestas desde ya!
Xve, te agradezco muchísimo tu ayuda, me solucionaste el problema que tenia!! Te puedo hacer otra consulta? Estoy intentando hacer lo de la transición que te había comentado anteriormente y estoy utilizando este código, pero no me esta funcionando:

1
2
3
4
5
6
7
.social:hover{
            -webkit-transiton: opacity 0.7s;
            -moz-transition: opacity 0.7s;
            -ms-transition: opacity 0.7s;
            -o-transition: opacity 0.7s;
            -transition: opacity 0.7s;
    }

Como puedo lograr este efecto? Muchisimas gracias desde ya!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Problemas con hover imagebuttons

Publicado por xve (349 intervenciones) el 20/04/2015 07:53:47
Hola, esto lo tienes mal, no puedes poner el opacity en el transition... en el transition, tienes que especificar como tiene que hacer la transición, no lo que tiene que hacer.

Tendría que ser algo así:

1
2
3
4
5
6
7
8
9
10
11
12
.social {
    ...
    -webkit-transiton: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
    -transition: all 0.7s;
}
 
social:hover {
    opacity:0.7;
}

Revisa http://www.css3.info/preview/css3-transitions/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar