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.
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 */
}Valora esta pregunta
0
