HTML - es posible estirar una imagen hacia arriba con CSS?

   
Vista:

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


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;
}
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
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Seguridad en web
- Matrix
- Top Links
Imágen de perfil de xve

es posible estirar una imagen hacia arriba con CSS?

Publicado por xve (1178 intervenciones) el 06/08/2016 09:01:10
Hola Samuel, si que es posible... simplemente indica la anchura y altura de la imagen... por ejemplo, la imagen de este código mide 100x100 pixels y la estiro a una altura de 800 pixels

1
2
3
4
<style>
img {height:800px;width:100px;}
</style>
<img src="img_1.jpg">
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

es posible estirar una imagen hacia arriba con CSS?

Publicado por Samuel (10 intervenciones) el 06/08/2016 17:55:45
no me sirvio
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

es posible estirar una imagen hacia arriba con CSS?

Publicado por xve (1178 intervenciones) el 06/08/2016 21:00:28
porque?? estira la imagen, no?
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