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:
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!
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
0
