Redimensionner une div

**lauretflo** · 16/01/2015, 21h38

salut à tous, j'ai trouvé sur le net un slider très sympa et je voudrais le redimensionner 300px x 179px
J'ai redimensionné mes photos, mais je me prends la tête pour tenter de l'adapter mais j'y arrive pas

je vous mets le code original pour pour partir d'une base "juste".

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
.cr-container{
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #fff;
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:350px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom: -20px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: scaleOut 0.6s ease-in-out;
	-moz-animation: scaleOut 0.6s ease-in-out;
	-o-animation: scaleOut 0.6s ease-in-out;
	-ms-animation: scaleOut 0.6s ease-in-out;
	animation: scaleOut 0.6s ease-in-out;
}
@-webkit-keyframes scaleOut{
	0%{ -webkit-transform: scale(1); opacity: 1; }
	100%{ -webkit-transform: scale(1.5); opacity: 0; }
}
@-moz-keyframes scaleOut{
	0%{ -moz-transform: scale(1); opacity: 1; }
	100%{ -moz-transform: scale(1.5); opacity: 0; }
}
@-o-keyframes scaleOut{
	0%{ -o-transform: scale(1); opacity: 1; }
	100%{ -o-transform: scale(1.5); opacity: 0; }
}
@-ms-keyframes scaleOut{
	0%{ -ms-transform: scale(1); opacity: 1; }
	100%{ -ms-transform: scale(1.5); opacity: 0; }
}
@keyframes scaleOut{
	0%{ transform: scale(1); opacity: 1; }
	100%{ transform: scale(1.5); opacity: 0; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	z-index:10000;
}
.cr-titles h3{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
	z-index: 10000;
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
	opacity: 0;
	top: 50%;
}
.cr-titles h3 span:nth-child(1){
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	letter-spacing: 7px;
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
	margin-top: 84px;
	letter-spacing: 0px;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px 0px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span{
	opacity: 0;
	text-shadow: 0px 0px 30px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
	opacity: 1;
	text-shadow: 0px 0px 1px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
	height: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h3{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
/* General Demo Style */
body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	color: #3a2127;
 
}
 
.container{
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}
 
 
/* Header Style */

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
.cr-container{
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #fff;
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:350px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom: -20px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: scaleOut 0.6s ease-in-out;
	-moz-animation: scaleOut 0.6s ease-in-out;
	-o-animation: scaleOut 0.6s ease-in-out;
	-ms-animation: scaleOut 0.6s ease-in-out;
	animation: scaleOut 0.6s ease-in-out;
}
@-webkit-keyframes scaleOut{
	0%{ -webkit-transform: scale(1); opacity: 1; }
	100%{ -webkit-transform: scale(1.5); opacity: 0; }
}
@-moz-keyframes scaleOut{
	0%{ -moz-transform: scale(1); opacity: 1; }
	100%{ -moz-transform: scale(1.5); opacity: 0; }
}
@-o-keyframes scaleOut{
	0%{ -o-transform: scale(1); opacity: 1; }
	100%{ -o-transform: scale(1.5); opacity: 0; }
}
@-ms-keyframes scaleOut{
	0%{ -ms-transform: scale(1); opacity: 1; }
	100%{ -ms-transform: scale(1.5); opacity: 0; }
}
@keyframes scaleOut{
	0%{ transform: scale(1); opacity: 1; }
	100%{ transform: scale(1.5); opacity: 0; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	z-index:10000;
}
.cr-titles h3{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
	z-index: 10000;
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
	opacity: 0;
	top: 50%;
}
.cr-titles h3 span:nth-child(1){
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	letter-spacing: 7px;
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
	margin-top: 84px;
	letter-spacing: 0px;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px 0px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span{
	opacity: 0;
	text-shadow: 0px 0px 30px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
	opacity: 1;
	text-shadow: 0px 0px 1px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

Si quelqu'un pouvait m'aider, je lui en serait immensément reconnaissant....

Invité · 17/01/2015, 03h02

Bonjour,

1/ Tant qu'à faire, donne-nous le nom du slider, et le lien où le voir/télécharger

2/ Tu n'as mis que du CSS. Il manque le HTML qui va avec.

3/ Il existe aussi des sliders "responsive" = qui s'adapte automatiquement en dimensions.
Une simple recherche...

**lauretflo** · 17/01/2015, 09h07

voici le lien : http://tympanus.net/codrops/2012/01/...els-with-css3/
lorsque le dossier téléchargé, il s'agit du code html 4

sinon voici le code html manquant.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Sliding Image Panels with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Sliding Image Panels with CSS3" />
        <meta name="keywords" content="sliding, background-image, css3, panel, images, slider" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style4.css" />
    </head>
    <body>
        <div class="container">
 
 
			<section class="cr-container">
 
				<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
				<label for="select-img-1" class="cr-label-img-1">1</label>
 
				<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
				<label for="select-img-2" class="cr-label-img-2">2</label>
 
				<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
				<label for="select-img-3" class="cr-label-img-3">3</label>
 
				<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
				<label for="select-img-4" class="cr-label-img-4">4</label>
 
				<div class="clr"></div>	
				<div class="cr-bgimg">
					<div>
						<span>Slice 1 - Image 1</span>
						<span>Slice 1 - Image 2</span>
						<span>Slice 1 - Image 3</span>
						<span>Slice 1 - Image 4</span>
					</div>
					<div>
						<span>Slice 2 - Image 1</span>
						<span>Slice 2 - Image 2</span>
						<span>Slice 2 - Image 3</span>
						<span>Slice 2 - Image 4</span>
					</div>
					<div>
						<span>Slice 3 - Image 1</span>
						<span>Slice 3 - Image 2</span>
						<span>Slice 3 - Image 3</span>
						<span>Slice 3 - Image 4</span>
					</div>
					<div>
						<span>Slice 4 - Image 1</span>
						<span>Slice 4 - Image 2</span>
						<span>Slice 4 - Image 3</span>
						<span>Slice 4 - Image 4</span>
					</div>
				</div>
				<div class="cr-titles">
					<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
					<h3><span>Adventure</span><span>Where the fun begins</span></h3>
					<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
					<h3><span>Serenity</span><span>When silence touches nature</span></h3>
				</div>
			</section>
        </div>
    </body>
</html>

Merci ;-)
car ce slider me tient à coeur .

**NoSmoking** · 17/01/2015, 09h23

Bonjour,
il te faut oublier les px et passer en %, par exemple pour les DIV qui constituent ton 'image',115.126.182.225 il te faut mettre 25% au lieu de 150px ( si tu en as 4 bien sûr!)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.cr-bgimg div {
/*    width : 150px;  /**/
    width: 25%;         /* si 4 panneaux */
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
}

et il te suffira donc de réajuster le conteneur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.cr-bgimg {
    width: 600px; /* a modifier */
    height: 400px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

il devra sûrement y avoir 2/3 bricoles à également retoucher mais voilà pour le principe.

**lauretflo** · 17/01/2015, 09h47

oui voici mes modifs perso au niveau du cadrage de mes différentes div, le souci, ce sont les images, j'comprends pô pourquoi j'ai 2 fois les deux mêmes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
.cr-container{
	width: 300px;
	height: 179px;
	position: absolute;
	text-align: center;
	overflow: hidden;
	border: 5px solid #212121;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
	left: 451px;
	top: -707px;
}
.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #fff;
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:350px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom: -20px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
.cr-bgimg{
	width: 300px;
	height: 178px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 25%;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 75px;
	height: 178px;
	top: -1px;
	left: -1px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(images/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: scaleOut 0.6s ease-in-out;
	-moz-animation: scaleOut 0.6s ease-in-out;
	-o-animation: scaleOut 0.6s ease-in-out;
	-ms-animation: scaleOut 0.6s ease-in-out;
	animation: scaleOut 0.6s ease-in-out;
}
@-webkit-keyframes scaleOut{
	0%{ -webkit-transform: scale(1); opacity: 1; }
	100%{ -webkit-transform: scale(1.5); opacity: 0; }
}
@-moz-keyframes scaleOut{
	0%{ -moz-transform: scale(1); opacity: 1; }
	100%{ -moz-transform: scale(1.5); opacity: 0; }
}
@-o-keyframes scaleOut{
	0%{ -o-transform: scale(1); opacity: 1; }
	100%{ -o-transform: scale(1.5); opacity: 0; }
}
@-ms-keyframes scaleOut{
	0%{ -ms-transform: scale(1); opacity: 1; }
	100%{ -ms-transform: scale(1.5); opacity: 0; }
}
@keyframes scaleOut{
	0%{ transform: scale(1); opacity: 1; }
	100%{ transform: scale(1.5); opacity: 0; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	z-index:10000;
}
.cr-titles h3{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
	z-index: 10000;
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
	opacity: 0;
	top: 57px;
}
.cr-titles h3 span:nth-child(1){
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 7px;
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
	margin-top: 84px;
	letter-spacing: 0px;
	background: rgba(0, 0, 0,0.4);
	font-size: 14px;
	padding: 10px 0px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span{
	opacity: 0;
	text-shadow: 0px 0px 30px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
	opacity: 1;
	text-shadow: 0px 0px 1px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

**NoSmoking** · 17/01/2015, 11h06

il devra sûrement y avoir 2/3 bricoles à également retoucher mais voilà pour le principe.

j'ai surement omis des 0

car même dans les transitions il te faut changer le px en %, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}

Invité · 17/01/2015, 14h56

Envoyé par lauretflo

... je voudrais le redimensionner 300px x 179px

Ben voyons...

Le slider original fait 600 x 400px. Je pense que ce ne doit pas être sorcier de diviser par 2, pour obtenir 300 x 200px !

Je l'ai fait : http://codepen.io/jreaux62/pen/emWOOe

J'ai conservé les dimensions en pixels, mis quelques %, quand c'était possible (sur des width).
C'était, ici, plus simple/rapide.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
.cr-container{
	width: 300px;
	height: 200px;
	position: relative;
	margin: 0 auto;
	border: solid #fff;
	border-width: 10px 10px 25px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
	font-style: italic;
	width: 75px;
	height: 8px;
	cursor: pointer;
	color: #fff;
	line-height: 16px;
	font-size: 12px;
	float:left;
	position: relative;
	margin-top:208px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 10px;
	height: 10px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -5px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 200px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom: -10px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
.cr-bgimg{
	width: 300px;
	height: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 75px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -75px;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/1.jpg);
  background-size: cover;
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/2.jpg);
  background-size: cover;
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/3.jpg);
  background-size: cover;
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/4.jpg);
  background-size: cover;
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -75px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -225px 0px;
}
 
.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: slideOut 0.6s ease-in-out;
	-moz-animation: slideOut 0.6s ease-in-out;
	-o-animation: slideOut 0.6s ease-in-out;
	-ms-animation: slideOut 0.6s ease-in-out;
	animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 75px; }
}
@-moz-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 75px; }
}
@-o-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 75px; }
}
@-ms-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 75px; }
}
@keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 75px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: left 0.5s ease-in-out;
	-moz-transition: left 0.5s ease-in-out;
	-o-transition: left 0.5s ease-in-out;
	-ms-transition: left 0.5s ease-in-out;
	transition: left 0.5s ease-in-out;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	left: 0px;
	z-index: 10;
}
.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: -20px;
	z-index: 10000;
	opacity: 0;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 28px;
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 3px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 175px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

Au cas on tu voudrais enlever les lignes de démarcation (qui ne sont pas un défaut, mais un effet volontaire !), supprime :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cr-container label:after{
/*...........*/
}

**lauretflo** · 17/01/2015, 16h01

Yes, merci beaucoup !!!!
alors je précise juste que l'idée n'est pas que tu fasses à ma place. Je vais comparer le code original et tes modifs pour comprendre ce que tu as fait. En tout cas, merci pour ton travail !

Juste une dernière question, quel code faudrait-il mettre pour que le défilement soit automatique plutôt que manuel ?

**NoSmoking** · 24/01/2015, 10h01

Il te faut pour cela avoir recours à du JavaScript.

Exemple de code à rajouter en fin de fichier

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var oInput = document.querySelectorAll('input[id^="select-img"]');
    actif = 0,     // image 1 par défaut a début
    delay = 2000,  // delai entre changement
    nb = oInput.length;
setInterval( function(){
    actif = (actif +1) % nb;
    oInput[actif].click();
  }, delay);

Redimensionner une div

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager