CSS - Problema Sidebar Redes sociales

 
Vista:
Imágen de perfil de Ricardo
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Problema Sidebar Redes sociales

Publicado por Ricardo (7 intervenciones) el 26/04/2018 22:36:36
Hola tengo un problema con el contenedor aside.
Estoy poniendo imagenes horizontalmente una tras otra de facebook y instagram con el evento hover.
El problema esque al pasar el mouse lejos de la primera imagen esta igual hace zoom porque el contenedor div es mas largo que las imagenes que contiene.




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
<!DOCTYPE html>
<html>
    <head>
        <title>Web 2</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav class="menu">
         <ul>
            <li class="logotipo"><a href="#"></a></li>
            <li class="menu2"><a href="#">Inicio</a></li>
            <li class="menu2"><a href="#">Concursos</a></li>
            <li class="menu2"><a href="#">Sobre Nosotros</a></li>
            <li class="menu2"><a href="#">Contacto</a></li>
         </ul>
         </nav>
     <section class="noticias">
        <header><h3 class="titulo-noticias">Noticias</h3></header>
     </section>
     <aside>
         <header><h3 class="redes-sociales">Redes sociales</h3></header>
            <div>
             <a class="facebook" href="#"><img class="icon" src="images/facebook.png"></a>
             <a class="instagram" href="#"><img class="icon" src="images/instagram.png"></a>
            </div>
     </aside>
    </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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
* {
    margin: 0;
    padding: 0;
}
 
html {
    font-family: sans-serif;
    background: #eeeeee;
}
 
.menu {
    width:100%;
    box-shadow: 1px 1px 5px #9f9f9f;
    background-color: white;
}
 
.menu ul {
    list-style: none;
    margin-left: 461px;
}
 
.menu ul li {
    display:inline-block;
   }
 
.menu ul .menu2 a {
    display: block;
    padding: 25px;
    color:dimgrey;
    text-decoration: none;
    font: bold 14px sans-serif;
    vertical-align: middle;
}
 
.menu ul li a:hover {
    color:black;
}
 
.noticias {
    margin-top: 60px;
    background-color:white;
    margin: 50px 461px;
    margin-left: 461px;
    margin-right: 20px;
    /*border: 1px solid #9f9f9f;*/
    height: 800px;
    width: 770px;
    box-shadow: 2px 2px 5px #9f9f9f;
    /*border-radius: 5px;*/
    float:left;
}
 
.logotipo {
    margin-right: 100px;
}
 
aside {
    padding: 0px;
    margin-top:50px;
    height: auto;
    width: auto;
    float: left;
    background-color: white;
    box-shadow: 2px 2px 5px #9f9f9f;
}
 
.redes-sociales {
    padding: 10px;
    color:dimgrey;
    font-size: 90%;
    border-bottom: 1px solid dimgrey;
    text-transform:uppercase;
}
 
.titulo-noticias {
    padding: 10px;
    color: dimgrey;
    font-size: 90%;
    border-bottom: 1px solid dimgrey;
    text-transform: uppercase;
}
 
div {
    margin: 10px 10px;
    padding: 10px 10px;
    overflow: hidden;
}
 
div .facebook img {
    margin: 10px 10px;
    width: 25%;
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
}
 
div:hover .facebook img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}
 
div .instagram img {
    margin: 10px 10px;
    width: 25%;
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
}

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 juan jose
Val: 196
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema Sidebar Redes sociales

Publicado por juan jose (54 intervenciones) el 26/04/2018 23:20:04
el problema es que el hover esta en el div

1
2
3
4
5
6
7
div:hover .facebook img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

y realmente deberia de ser

1
2
3
4
5
6
7
.facebook:hover img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

o bien

1
2
3
4
5
6
7
.facebook img:hover {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

.facebook:hover img el hover seria cuando pasases por el enlace de la clase facebook

.facebook img:hover el hover seria cuando pases por encima de la imagen de facebook
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Ricardo
Val: 11
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Problema Sidebar Redes sociales

Publicado por Ricardo (7 intervenciones) el 27/04/2018 06:42:28
Graciaas ya lo solucione:D
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