CSS - Tendria que reducir las imagenes

   
Vista:
Imágen de perfil de Jaimie

Tendria que reducir las imagenes

Publicado por Jaimie (14 intervenciones) el 29/08/2015 17:48:28
Hola a todos/as:Hice un slider de fotos y sale bien, copiando de algunos ejemplos y haciendoles algunos cambios este seria mi codigo en HTML
1
2
3
4
5
6
7
8
<div class="galeria">
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
</div>

Y este seria el de 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
.galeria {
  position: relative;
 
  width:70%;
  overflow: hidden;
  margin: 30px auto;
  background-color: #000;
  box-shadow: 1px 1px 6px #000;
  border: 10px solid #171717;
}
 
.galeria:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(FOTOSMETAL\tarjeta.jpg);
  background-size: cover;
  opacity: .1;
}
.miniatura {
  position: relative;
  width:10%;
  padding-bottom: 10%;
  background-position:50% 50%;
  background-size: cover;
  cursor: pointer;
}
.miniatura:before {
  content: "";
  position: absolute;
  top: -1100%;
  left: 100%;
  width: 900%;
  height: 600%;
  border: 5px solid white;
  box-sizing: border-box;
  background-image: inherit;
  background-size: cover;
  transition: all .8s;
}
.miniatura:nth-of-type(1) {
  background-image: url(FOTOSMETAL/foto5.jpg);
}
.miniatura:nth-of-type(2) {
  background-image: url(FOTOSMETAL/lamp2.jpg);
}
.miniatura:nth-of-type(3) {
  background-image: url(https://lh5.googleusercontent.com/-uGIMoR677PM/UCPyOBjNWVI/AAAAAAAAEDo/XE73W5FQW-c/s800/fuerzas-naturaleza3.jpg);
}
.miniatura:nth-of-type(4) {
  background-image: url(https://lh5.googleusercontent.com/-nbNq900tVT4/UCPyQeZkP_I/AAAAAAAAEDw/WsBQhD2Da-o/s800/fuerzas-naturaleza4.jpg);
}
.miniatura:nth-of-type(5) {
  background-image: url(https://lh3.googleusercontent.com/-RtWSpaFr9wA/UoUy3TiQJGI/AAAAAAAAMUg/S9GXFeowXrU/s750/aurora.jpg);
}
.miniatura:nth-of-type(6) {
  background-image: url(https://lh6.googleusercontent.com/-edBbxLGJGoY/UoUy329F15I/AAAAAAAAMUs/7mjOTVqm3Ek/s750/crater.jpg);
}
.miniatura:hover:before {
  transform: scale(.9);
}
.miniatura:hover:nth-of-type(1):before {
  top: 0%;
}
.miniatura:hover:nth-of-type(2):before {
  top: -100%;
}
.miniatura:hover:nth-of-type(3):before {
  top: -200%;
}
.miniatura:hover:nth-of-type(4):before {
  top: -300%;
}
.miniatura:hover:nth-of-type(5):before {
  top: -400%;
}
.miniatura:hover:nth-of-type(6):before {
  top: -500%;
}
 
html {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b));
  background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
  background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
  background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
}


Las pequenas que quedan al lado me sale bien de width y de hight, pero a pasarlas mas grandes salen por la mitad...no se en que he fallado.las 2 primeras salen mal, el resto se acomoda bien

Sera que tengo redimensionar mis imagenes.Gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de xve

Tendria que reducir las imagenes

Publicado por xve (349 intervenciones) el 30/08/2015 10:17:01
Hola Jaimie, he probado tu código, y lo veo perfecto... lo único que veo, es que las dos primeras imágenes que utilizas, no son de internet, están en tu maquina.

He probado el código y me ha parecido excelente, esta muy bien pensado... aqui te lo adjunto completo pos si quieres pegarlo y probarlo.

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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<style>
	.galeria {
		position: relative;
		width:70%;
		overflow: hidden;
		margin: 30px auto;
		background-color: #000;
		box-shadow: 1px 1px 6px #000;
		border: 10px solid #171717;
	}
 
	.miniatura {
		position: relative;
		width:10%;
		padding-bottom: 10%;
		background-position:50% 50%;
		background-size: cover;
		cursor: pointer;
	}
	.miniatura:before {
		content: "";
		position: absolute;
		top: -1100%;
		left: 100%;
		width: 900%;
		height: 600%;
		border: 5px solid white;
		box-sizing: border-box;
		background-image: inherit;
		background-size: cover;
		transition: all .8s;
	}
	.miniatura:nth-child(1) {
	background-image: url(http://www.definicionabc.com/wp-content/uploads/Paisaje-Natural.jpg);
	}
	.miniatura:nth-child(2) {
	background-image: url(http://misimagenesde.com/wp-content/uploads/2012/04/paisajes-naturales.jpg);
	}
	.miniatura:nth-child(3) {
	background-image: url(https://lh5.googleusercontent.com/-uGIMoR677PM/UCPyOBjNWVI/AAAAAAAAEDo/XE73W5FQW-c/s800/fuerzas-naturaleza3.jpg);
	}
	.miniatura:nth-child(4) {
	background-image: url(https://lh5.googleusercontent.com/-nbNq900tVT4/UCPyQeZkP_I/AAAAAAAAEDw/WsBQhD2Da-o/s800/fuerzas-naturaleza4.jpg);
	}
	.miniatura:nth-child(5) {
	background-image: url(https://lh3.googleusercontent.com/-RtWSpaFr9wA/UoUy3TiQJGI/AAAAAAAAMUg/S9GXFeowXrU/s750/aurora.jpg);
	}
	.miniatura:nth-child(6) {
	background-image: url(https://lh6.googleusercontent.com/-edBbxLGJGoY/UoUy329F15I/AAAAAAAAMUs/7mjOTVqm3Ek/s750/crater.jpg);
	}
	.miniatura:hover:before {
	transform: scale(.9);
	}
	.miniatura:hover:nth-child(1):before {
	top: 0%;
	}
	.miniatura:hover:nth-child(2):before {
	top: -100%;
	}
	.miniatura:hover:nth-child(3):before {
	top: -200%;
	}
	.miniatura:hover:nth-child(4):before {
	top: -300%;
	}
	.miniatura:hover:nth-child(5):before {
	top: -400%;
	}
	.miniatura:hover:nth-child(6):before {
	top: -500%;
	}
	</style>
</head>
 
<body>
 
<div class="galeria">
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
	<div class="miniatura"></div>
</div>
 
</body>
</html>
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 Jaimie

Tendria que reducir las imagenes

Publicado por Jaimie (14 intervenciones) el 30/08/2015 18:05:11
Gracias pude arreglarlo,le baje un porcentaje al width y me salio...ahora salio otro incoveniente,quize hacer otro igual,hice los mismos solo que cambien logico el nombre del div etc pero las fotos miniaturas del lado izquierdo aparecen pero la transicion no del lado derecho...bueno seguire intentando.Gracias
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