es posible estirar una imagen hacia arriba con CSS?
Publicado por Samuel (10 intervenciones) el 06/08/2016 03:21:57
veran lo que trato de hacer es q al pasar sobre los botones del menu de redes sociales es q se estire el cuadrado hacia arriba pero de alguna forma solo se puede hacia abajo, alguien podria ayudarme?
osea quiero que el logo de facebook se mantenga donde la barra negra al colocar el mouse encima pero que se estire el cuadrado rojo hasta arriba
codigos
css
osea quiero que el logo de facebook se mantenga donde la barra negra al colocar el mouse encima pero que se estire el cuadrado rojo hasta arriba
codigos
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
<main>
<a href="#"><img class="foto1" src="imagen/foto.jpg" alt="imagen 1"></a>
<a href="#"><img class="foto2" src="imagen/foto2.jpg" alt="imagen 2"></a>
<a href="#"><img class="foto3" src="imagen/foto3.jpg" alt="imagen 3"></a>
<a href="#"><img class="foto4" src="imagen/foto4.jpg" alt="imagen 4"></a>
<div class="social">
<ul>
<li><a href="#/" target="_blank" ><img class="icono1" src="icon/yahoo.png" alt="icon1"></a></li>
<li><a href="https://www.facebook.com/" target="_blank" ><img class="icono2" src="icon/facebook.png" alt="icon2"></a></li>
<li><a href="#" target="_blank" ><img class="icono3" src="icon/twitter.png" alt="icon3"></a></li>
<li><a href="https://www.instagram.com/" target="_blank" ><img class="icono4" src="icon/instagram.png" alt="icon4"></a></li>
</ul>
</div</main>
<footer>
<div id="container">
<div id="footer"></div>
</div>
</footer>
</body>
</html>
css
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
body { margin:0; padding:0;height:100%;
}#container {
min-height:100%;
position:relative;}#body {
padding:10px;padding-bottom:20px; /* Height of the footer */
}#footer {
position:absolute; /*si pongo fixed se queda pegado al scrollear cambiarlo a fixed al tener el fondo largo*/
bottom:0; top: 700px;width:100%;
height:68.5px; /* Height of the footer */
background:#000000;
}#container {
height:100%;
}.social {
position:absolute; /*si pongo fixed se queda pegado al scrollear cambiarlo a fixed al tener el fondo largo*/
bottom:0;top: 652.2px;
z-index: 2000;
}.social ul {
list-style: none;
}.social ul li a {
display: inline-block;
padding: 10px 15px;text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;}.social ul li .icono1{
background: #ff0000;
height: 64px;width: 64px;position:absolute;top: 400px;left: 1076.2px;
}.social ul li .icono2 {
background: #ff0000;
height: 64px;width: 64px;position:absolute;top: 400px;left: 1155.2px;
}.social ul li .icono3 {
background: #ff0000;
height: 64px;width: 64px;position:absolute;top: 400px;left: 1234.2px;
}.social ul li .icono4 {
background: #ff0000;
height: 64px;width: 64px;position:absolute;top: 400px;left: 1310.2px;
}.icono1:hover {
padding-top: 50px;
}.icono2:hover {
padding-top: 50px;
}.icono3:hover {
padding-top: 50px;
}.icono4:hover {
padding-top: 50px;
}- imagen.rar(21,3 KB)
Valora esta pregunta
0
