Overlay - Superposer une image par du texte correspondant, au survole d'un texte (Jquery)

Version imprimable

Bonsoir à tous,

j'ai testé ce bout de code, permettant d'afficher une div de texte sur l'image, en la survolant.
l'idée est intéressante mais offre peu de possibilité.
je suis débutant, peut être que, je me trompe

mon but est le suivant :
en survolant un texte_1, il affichera le contenu d'une div_1, sur l'image_A
en survolant un texte_2, il affichera le contenu d'une div_2, sur l'image_A

y a t-il une solution en exploitant uniquement le CSS et HTML?
merci pour votre temps

voici mon

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
</head>
<style type="text/css">
        * {
        margin: 0;
        padding: 0;
        font-family: arial;
        }
        
        body {
        width: 100vw;
        height: 100vh;
        background-color: #112339;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        
        .main {                          /* DIV MASTER */
                width: 400px;
                height: 267px;
                background-color: #999;    /* Gris */
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: 0.5s;
                overflow: hidden;
                margin-left: 5px;
                margin-right: 5px;
                background-size: cover;
                background-repeat: no-repeat;
        }
        
        .a {
                background-image: url(chat.jpg);
        }
        
 
        .overlay {                        /* Class pour cacher le contenu */
                width: 300px;
                height: 267px;
                background: linear-gradient(to left, rgba(0,0,0,0.7)50%, rgba(0,0,0,0.7)50%);
                transition: 0.5s;
                position: absolute;
                left: 400px;
                text-align: center;
        }
        
        .main:hover .overlay {
                top: 0;
                left: 0;
        }
        
        .overlay h2 {
                padding-top: 50px;
                font-size: 30px;
                color: #fff;
        }
        
        .overlay p {
                font-size: 14px;
                line-height: 25px;
                color: #fff;
                letter-spacing: 1.5px;
                padding: 20px;
        }
        
        .main button {
                width: 150px;
                height: 40px;
                border-radius: 5px;
                border: none;
                background-color: #fed700;
                color: #000;
                font-size: 14px;
                cursor: pointer;
                transition: 0.5s;
                font-weight: bold;
        }
        
        .main button:hover {
                background-color: #000;
                color: #fed700;
        }
        
</style>
 
<body>
 
	<div class="main a">
		<div class="overlay">
			<h2>Titre</h2>
			<p>Lorem ipsum dolor sit amet elit, sed do eiusmod
			tempor incididunt ut labore consectetur.</p>
			<button>Bouton</button>
		</div>
	</div>
	<p style="color: #fff;">Détails_0&nbsp;&nbsp;&nbsp;&nbsp;</p>
	<p style="color: #fff;">Détails_1</p>
 
 
 
 
</body>
</html>

20/01/2023, 22h17
two3d

Où est texte_1 et div_1 dans ton code que tu nous montre ?

Quelle est la partie caché avant de le survoler ?
Quelle est la partie à afficher quand on survole ?
21/01/2023, 07h57
LS_Soleil

bonjour,

j'ai utilisé, texte_1 et div_1, afin d'imager le contexte du mécanisme.

la partie apparente est est la class [main] contenant l'image chat.jpg, de la class [a] du fichier css.
dans index.html, le contenu caché est dans la balise div estampillée de la class [overlay].
les deux balises <p> sont les futurs lien de survole pour affiche la class [overlay] sur [main a].

merci
21/01/2023, 08h49
mathieu

je vois déjà l'effet de survol avec votre code, que cherchez vous comme résultat ?

OK, tu as plusieurs erreurs dans ton CSS actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .overlay { /* Class pour cacher le contenu */ width: 300px; height: 267px; background: linear-gradient(to left, rgba(0,0,0,0.7)50%, rgba(0,0,0,0.7)50%); transition: 0.5s; position: absolute; left: 400px; text-align: center; } .main:hover .overlay { top: 0; left: 0; }
Pour rappel :

:hover = au survol

Ce qu'il faut faire : cacher la div .overlay display:none et si seulement on survol la div .main, on affiche la div .overlay {display:block}.

Les erreurs :

ya pas de display:none/block (mais tu souhaites utiliser les transitions à ce que je vois, faire venir l'overlay depuis la gauche).
il te faut mettre top:0; right: 0; bottom:0; et left:0; (pour qu'elle vienne se coller à tous les bords de la div.main.
div.overlay n'a pas besoin d'avoir de largeur et de hauteur, elle suit automatiquement la largeur parente (div.main) grâce à la position absolute qu'elle a.

Voilà, petite astuce ; ton image background sur la div.main sera pas centrée, ajoute un background-position:50% pour se faire ;)

Après vu que tu souhaite utiliser les transitions CSS, du coup, là oui il te faudra mettre un [B]left:0[/c] quand on survol et mettre un left: -[largeur div.main] par défaut à .overlay pour le faire venir de la gauche (bottom pour faire venir d'en bas, etc...)

21/01/2023, 10h36
LS_Soleil

1 pièce(s) jointe(s)

Citation:

Envoyé par mathieu

je vois déjà l'effet de survol avec votre code, que cherchez vous comme résultat ?

je souhaite :
lors du survole de l'icone "60" qu'un TXT1 coulisse de la droite vers la gauche, sur la photo du chat
lors du survole de l'icone "45" qu'un TXT2 coulisse de la droite vers la gauche, sur la photo du penseur

Pièce jointe 632868

3 pièce(s) jointe(s)

c'est un bon début, mais cela ne coulisse pas
en survolant l'icone "60", je superpose une texte sur l'image
Pièce jointe 632887
en survolant l'icone "45", je superpose une texte sur un autre texte
Pièce jointe 632888
Pièce jointe 632889

index.html

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
	  <!-- CSS Gabarit -->
	  <link href="assets/css/plugins/bootstrap.min.css" rel="stylesheet">           
	  <link href="assets/css/plugins/slick.css" rel="stylesheet">
	  <link href="assets/css/plugins/ion.rangeSlider.min.css" rel="stylesheet">
	  <link href="assets/css/plugins/magnific-popup.css" rel="stylesheet">
	  <link href="assets/css/style.css" rel="stylesheet">
 
 
	  <!-- CSS Perso -->
	  <link href="assets/css/Carte.css" rel="stylesheet">   
 
	    <!-- Font Gabarit -->
	  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet">
	  <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css'>
 
 
<style type="text/css">
 
        .img1 {
                background-color: transparent;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: 0.5s;
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                width: 86%;
                box-shadow: 0px 10px 40px rgba(0,0,0,0.5);
                display: block;
                margin-top: 25px;
                margin-left: 7%;
                margin-right: 7%;
        }
 
        .overlay {                        /* Class pour cacher le contenu */
                width: 400px;
                height: 267px;
                background: linear-gradient(to left, rgba(0,0,0,0.7)50%, rgba(0,0,0,0.7)50%);
                border-radius: 10px;
                transition: 0.5s;
                position: absolute;
                left: 5px;
                top: 0px;
                text-align: center;
        }
        
        .img1:hover .overlay {
                top: 0;
                left: 5;
        }
        
        .overlay h2 {
                padding-top: 50px;
                font-size: 30px;
                color: #fff;
        }
        
        .overlay p {
                font-size: 14px;
                line-height: 25px;
                color: #fff;
                letter-spacing: 1.5px;
                padding: 20px;
        }
        
        .text1 {
                background-color: transparent;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: 0.5s;
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                width: 96%;
                box-shadow: 0px 10px 40px rgba(0,0,0,0.5);
                display: block;
                margin-top: 25px;
                margin-left: 2%;
                margin-right: 2%;
        }       
 
        .overlay1 {                        /* Class pour cacher le contenu */
                width: 96%;
                margin-left: 2%;
                margin-right: 2%;
                background: linear-gradient(to left, rgba(0,0,0,1)100%, rgba(0,0,0,1)100%);
                border-radius: 10px;
                transition: 0.5s;
                position: absolute;
                top: 350px;
                left: 0px;
                text-align: center;
        }
        
        .text1:hover .overlay {
                top: 350px;
                left: 0px;
        }
 
        
.legende {
     display:none
}
.icone:hover ~ .legende {
     display:block;
}
 
 
        
</style>	
</head>
 
 
 
<body class="btn-style-1 btn-skewed sidebar-style-1" data-bs-spy="scroll" data-bs-target="#section-header" data-bs-offset="196">
 
 
  <!--                         --------------------              -->
  <div id="section-services">
	<div class="section section-padding bg-gray" style="background-color: #FFECDD;"> 
      <div class="container">
 
 
		<!-- Ligne 1 -->	
		<div class="row" >      <!-- style="border:1px solid green;" -->
 
			  <!-- Carte I -->
			  <div class="col-lg-4 col-md-6">       <!-- style="border:1px solid black;" -->
 
				<div class="card">
					<div class="img1">
					<div class="img2">
						<img src="assets/img/Chat_03.jpg" alt="">
					</div>
					</div>
					<div class="icone">
							<img src="ICO_SVG/60.svg" alt="icone" height="42" width="42" class="icone" />
 
							<div class="legende overlay">
								<div class="img1">				
										<h2>Titre IMG</h2>
										<p>Lorem ipsum dolor sit amet elit, sed do eiusmod
										tempor incididunt ut labore consectetur.</p>
								</div>
							</div>
					</div>
 
					<div class="text">
						<h2>Titre Principal TEXTE</h2>
						<hr>
						<p style="margin-bottom: 20px;">Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
						voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
						<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
						voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
						Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
						saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
 
 
						<div class="icone">
							<img src="ICO_SVG/45.svg" alt="icone" height="42" width="42" class="icone" />
 
							<div class="legende overlay1">
								<div class="text1">				
										<h2>SOUS TITRE TEXTE</h2>
										<p>Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
										voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
										<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
										voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
										Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
										saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
										<p>Quelques plaids en velours, laine, fausse fourrure posés ici, de jolis boutis fleuris ou poétiques 
										en gaze de coton par là… la maison se fait toute douce et volupteuse.</p>
 
								</div>
							</div>
						</div>	
 
 
 
					</div>
 
					<div class="more-text">
						<h2>SOUS TITRE TEXTE</h2>
						<p>Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
						voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
						<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
						voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
						Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
						saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
						<p>Quelques plaids en velours, laine, fausse fourrure posés ici, de jolis boutis fleuris ou poétiques 
						en gaze de coton par là… la maison se fait toute douce et volupteuse.</p>
					</div>
				</div>  
			  </div>
		    </div>
 
 
 
 
		</div>
      </div>
    </div>
 
  <!--                         --------------------              -->
 
 
 
 
 
 
	<!--                          Chargement PlugIns                      -->
    <script src="assets/js/plugins/jquery-3.4.1.min.js"></script>
    <script src="assets/js/plugins/popper.min.js"></script>
    <script src="assets/js/plugins/bootstrap.min.js"></script>
    <script src="assets/js/plugins/parallax.min.js"></script>
    <script src="assets/js/plugins/slick.min.js"></script>
    <script src="assets/js/plugins/imagesloaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/plugins/jquery.counterup.min.js"></script>
    <script src="assets/js/plugins/jquery.inview.min.js"></script>
    <script src="assets/js/plugins/ion.rangeSlider.min.js"></script>
    <script src="assets/js/plugins/jquery.validate.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/functions/mf_form.js"></script>
 
	<!-- Collapse -->
	<script src="assets/js/plugins/bootstrap.min.js.téléchargement"></script>
 
 
 
 
</body>
 
</html>

fichier CSS

Code:

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
hr {
	opacity : 0.8;
}
 
.cards {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
 
.card {
	position: relative;
	width: 100%;
	padding-bottom: 50px;
	background-color: #fff;
	box-shadow: 0 21px 35px rgb(0 0 0 / .10);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 20px;
}
 
.card .text {
	padding: 15px;
}
 
.card p {
	font-size: 16px;
	line-height: 30px;
}
 
.card h2 {
	font-size: 16px;
	margin-bottom: 20px;
}
 
.card .more-btn {
	width: 100px;
	height: 100px;
	background-color: #ea7f04;
	border-radius: 50%;
	position: absolute;
	bottom: -60px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	line-height: 60px;
	color: #fff;
	cursor: pointer;
	z-index: 9;
	font-size: 20px;
	transition: all ease 0.5s;
}
 
.card .more-btn:hover{
	background-color: #f7f7f7;
	color: #ea7f04;
}
 
.more-text{
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #ff8800;
	padding: 30px;
	overflow-y: auto;
	transition: all ease 0.7s;
 
}
 
.more-text::-webkit-scrollbar{
	width: 7px;
	background-color: #b3b3b3;
}
 
.more-text::-webkit-scrollbar-thumb{
	background-color: #c76d06;
}
 
.more-text h2 {
	color: #fff;
}
 
.more-text p {
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	font-weight: 500;
}
 
.more-text.active{
	bottom: 0;
}

j'ai l'impression vous vous êtes emmêlés les pinceaux en ajoutant trop de chose à la fois. il vaut mieux faire une petite modification après l'autre et tester après chaque modification.

j'ai enlevé plusieurs classes css en double et aussi du code css. le seul code css qui s'occupe de l'effet ":hover" est le suivant :

Code:

1
2
3
4
5
6
7
8
9
		.legende
		{
			left : -8000px;
		}
 
		.icone:hover .legende
		{
			left : 0;
		}

au départ le texte est déplacé en dehors du champs de vision et au survol, il revient. cela permet de faire une animation sur la position left (ça fonctionne aussi avec top, right et bottom) alors que le passage de "display block" à "display none" se fait d'un coup et ne peut donc pas être animé.

ensuite il y a aussi la classe "card" qui bloquait un affichage donc au final avec toutes les modifications, je suis arrivé ça :

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
	  <!-- CSS Gabarit -->
	  <link href="assets/css/plugins/bootstrap.min.css" rel="stylesheet">           
	  <link href="assets/css/plugins/slick.css" rel="stylesheet">
	  <link href="assets/css/plugins/ion.rangeSlider.min.css" rel="stylesheet">
	  <link href="assets/css/plugins/magnific-popup.css" rel="stylesheet">
	  <link href="assets/css/style.css" rel="stylesheet">
 
 
	  <!-- CSS Perso -->
	  <link href="style.css" rel="stylesheet">   
 
	    <!-- Font Gabarit -->
	  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet">
	  <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css'>
 
 
<style type="text/css">
 
        .img1 {
                background-color: transparent;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: 0.5s;
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                width: 86%;
                box-shadow: 0px 10px 40px rgba(0,0,0,0.5);
                display: block;
                margin-top: 25px;
                margin-left: 7%;
                margin-right: 7%;
        }
 
        .overlay {                        /* Class pour cacher le contenu */
                width: 400px;
                height: 267px;
                background: linear-gradient(to left, rgba(0,0,0,0.7)50%, rgba(0,0,0,0.7)50%);
                border-radius: 10px;
                transition: 0.5s;
                position: absolute;
                left: 5px;
                top: 0px;
                text-align: center;
        }
        
        
        .overlay h2 {
                padding-top: 50px;
                font-size: 30px;
                color: #fff;
        }
        
        .overlay p {
                font-size: 14px;
                line-height: 25px;
                color: #fff;
                letter-spacing: 1.5px;
                padding: 20px;
        }
        
        .text1 {
                background-color: transparent;
                border-radius: 10px;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: 0.5s;
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                width: 96%;
                box-shadow: 0px 10px 40px rgba(0,0,0,0.5);
                display: block;
                margin-top: 25px;
                margin-left: 2%;
                margin-right: 2%;
        }       
 
        .overlay1 {                        /* Class pour cacher le contenu */
                width: 96%;
                margin-left: 2%;
                margin-right: 2%;
                background: linear-gradient(to left, rgba(0,0,0,1)100%, rgba(0,0,0,1)100%);
                border-radius: 10px;
                transition: 0.5s;
                position: absolute;
                top: 350px;
                left: 0px;
                text-align: center;
                color : #EEE;
        }
 
        
                .legende
                {
                        left : -8000px;
                }
                
                .icone:hover .legende
                {
                        left : 0;
                }
 
        .card
        {
                position : unset;
        }
        
        
</style>	
</head>
 
 
 
<body class="btn-style-1 btn-skewed sidebar-style-1" data-bs-spy="scroll" data-bs-target="#section-header" data-bs-offset="196">
 
 
  <!--                         --------------------              -->
  <div id="section-services">
	<div class="section section-padding bg-gray" style="background-color: #FFECDD;"> 
      <div class="container">
 
 
		<!-- Ligne 1 -->	
		<div class="row" >      <!-- style="border:1px solid green;" -->
 
			  <!-- Carte I -->
			  <div class="col-lg-4 col-md-6">       <!-- style="border:1px solid black;" -->
 
				<div class="card">
					<div class="img1">
					<div class="img2">
						<img src="assets/img/Chat_03.jpg" alt="">
					</div>
					</div>
					<div class="icone">
							<img src="ICO_SVG/60.svg" alt="icone" height="42" width="42"/>
 
							<div class="legende overlay">
								<div class="img1">				
										<h2>Titre IMG</h2>
										<p>Lorem ipsum dolor sit amet elit, sed do eiusmod
										tempor incididunt ut labore consectetur.</p>
								</div>
							</div>
					</div>
 
					<div class="text">
						<h2>Titre Principal TEXTE</h2>
						<hr>
						<p style="margin-bottom: 20px;">Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
						voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
						<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
						voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
						Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
						saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
 
 
						<div class="icone">
							<img src="ICO_SVG/45.svg" alt="icone" height="42" width="42"/>
 
							<div class="legende overlay1">
								<div class="text1">				
										<h2>SOUS TITRE TEXTE</h2>
										<p>Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
										voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
										<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
										voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
										Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
										saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
										<p>Quelques plaids en velours, laine, fausse fourrure posés ici, de jolis boutis fleuris ou poétiques 
										en gaze de coton par là… la maison se fait toute douce et volupteuse.</p>
 
								</div>
							</div>
						</div>	
 
 
 
					</div>
 
					<div class="more-text">
						<h2>SOUS TITRE TEXTE</h2>
						<p>Lorem ipsum dolor sit amet. Id aliquam nobis ea ipsa natus in alias ipsa qui odit Quis! Eum perferendis 
						voluptates ea Quis dolores sed cupiditate repudiandae et nisi mollitia et deleniti ipsum qui ipsum reprehenderit!</p>
						<p>Aut eaque facere vel perferendis voluptas rem rerum earum id reiciendis sint non odio molestias id expedita 
						voluptas eum dicta corrupti. A animi illo ea consequatur atque qui voluptatibus dolorem et velit inventore? 
						Sit natus deserunt sed dolore accusantium ea iste blanditiis. 33 consequatur corporis et beatae quisquam ut 
						saepe natus a sapiente rerum aut animi minima aut sunt quasi.</p>
						<p>Quelques plaids en velours, laine, fausse fourrure posés ici, de jolis boutis fleuris ou poétiques 
						en gaze de coton par là… la maison se fait toute douce et volupteuse.</p>
					</div>
				</div>  
			  </div>
		    </div>
 
 
 
 
		</div>
      </div>
    </div>
 
  <!--                         --------------------              -->
 
 
 
 
 
 
	<!--                          Chargement PlugIns                      -->
    <script src="assets/js/plugins/jquery-3.4.1.min.js"></script>
    <script src="assets/js/plugins/popper.min.js"></script>
    <script src="assets/js/plugins/bootstrap.min.js"></script>
    <script src="assets/js/plugins/parallax.min.js"></script>
    <script src="assets/js/plugins/slick.min.js"></script>
    <script src="assets/js/plugins/imagesloaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/plugins/jquery.counterup.min.js"></script>
    <script src="assets/js/plugins/jquery.inview.min.js"></script>
    <script src="assets/js/plugins/ion.rangeSlider.min.js"></script>
    <script src="assets/js/plugins/jquery.validate.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/functions/mf_form.js"></script>
 
	<!-- Collapse -->
	<script src="assets/js/plugins/bootstrap.min.js.téléchargement"></script>
 
 
 
 
</body>
 
</html>

24/01/2023, 17h50
LS_Soleil

Merci Mathieu, pour votre temps.

sur votre exemple, vous introduisez l'effet de coulissement (animation).

ce weekend, j'ai travaillé sur une autre système de coulissement tout en css, avec une ascenseur.

voici le petit labo en fichier rar.
https://www.mediafire.com/file/iqvb2..._1btn.rar/file

la question est peut être farfelue,
peut-on faire coulisser depuis le bas de la carte, vers le haut, tout en gardant l'ascenseur?

je cherche une système simple, pour fournir de l'information supplémentaire, pour une carte, via un icone, sans déborder, de cette dernière.
je sais, une carte est réduite à sa simple utilisation, avec des infos essentiel, selon le cas.

je trouve que, c'est un moyen, de fournir plus d'informations, par cette objet.

merci de vos conseils.

bonne soirée
25/01/2023, 00h00
mathieu

je n'ai pas compris, quel est le souci avec les fichiers qui sont dans l'archive ?
25/01/2023, 17h49
LS_Soleil

Bonjour,

c'est pour montrer la solution CSS (bouton jaune)
l'avantage est que, la div qui monte, peu être manipulée par la roulette, si le contenu dépasse la gabarit de la div.
l'inconvénient de la fenêtre coulisse en jquery, le pointeur doit rester sur l'icone.

merci pour vos conseils.
je peux d'expérience et expérimente, afin de me familiariser, avec les différents objets.

bonne journée
28/01/2023, 16h21
LS_Soleil

4 pièce(s) jointe(s)

Bonjour à tous,

j'ai opter pour une fenêtrage coulissant, via un clic sur une image.
en bas de carte, il y a trois petites images, dont chacun, développe une fenêtre coulissante contre le haut.

le problème, par exemple si:
je clic sur image 1, naturellement la fenêtre coulissante s'affiche.
puis, ensuite, je clic sur l'image 2, sa propre fenêtre, s'affichera sur la dernière fenêtre affichée.
idem pour le cas numéro 3.

comment faire, pour descendre toutes fenêtres, susceptibilité d'être affichée (montée contre le haut),
pour affichée, celle demandée.

je ne trouve pas la solution en CSS. est ce faisable?

voici le lien du ficiher RAR du labo https://www.mediafire.com/file/4schw...3_btn.rar/file

Pièce jointe 633267
Pièce jointe 633268
Pièce jointe 633269
Pièce jointe 633270

merci de votre temps
28/01/2023, 18h51
two3d

Si tu fait coulisser en JS ?, tu descend tous les éléments qui ont la classe de coulisse et tu monte celle demandée.

bonjour,

j'ai essayé comme cela, mais ne semble pas fonctionner

voici le labo https://www.mediafire.com/file/v9dpj...tn_v4.rar/file

Code:

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
	<script>
                $(document).click(function(){
                                $('#ID_btn_Droite').removeClass('hiddenElement');
                                $('#ID_btn_Central').removeClass('hiddenElement');
                });
                $("#ID_TxT_Droite, #ID_btn_Droite").on("click", function() {
                                $("#ID_TxT_Droite, #ID_btn_Droite").toggleClass("hiddenElement"); 
                })
                $("#ID_TxT_Central, #ID_btn_Central").on("click", function() {
                                $("#ID_TxT_Central, #ID_btn_Central").toggleClass("hiddenElement"); 
                })
                
                $(document).ready(function(){
                                $(".login_icon_gauche").on('click', function(){
                                        $(this).parent().parent().find(".TxT_btn_gauche").toggleClass("active");
                                });
                });
                
 
 
                $(document).click(function(){
                                $('#ID_btn_Gauche').removeClass('hiddenElement');
                                $('#ID_btn_Central').removeClass('hiddenElement');
                });
                $("#ID_TxT_Gauche, #ID_btn_Gauche").on("click", function() {
                                $("#ID_TxT_Gauche, #ID_btn_Gauche").toggleClass("hiddenElement"); 
                })
                $("#ID_TxT_Central, #ID_btn_Central").on("click", function() {
                                $("#ID_TxT_Central, #ID_btn_Central").toggleClass("hiddenElement"); 
                })              
                $(document).ready(function(){
                        $(".login_icon_droite").on('click', function(){
                                $(this).parent().parent().find(".TxT_btn_droite").toggleClass("active");
                        });
                });
        
 
 
                $(document).click(function(){
                                $('#ID_btn_Gauche').removeClass('hiddenElement');
                                $('#ID_btn_Droite').removeClass('hiddenElement');
                });
                $("#ID_TxT_Gauche, #ID_btn_Gauche").on("click", function() {
                                $("#ID_TxT_Gauche, #ID_btn_Gauche").toggleClass("hiddenElement"); 
                })
                $("#ID_TxT_Droite, #ID_btn_Droite").on("click", function() {
                                $("#ID_TxT_Droite, #ID_btn_Droite").toggleClass("hiddenElement"); 
                })
                $(document).ready(function(){
                        $(".login_link_central").on('click', function(){
                                $(this).parent().parent().find(".TxT_btn_central").toggleClass("active");
                        });
                });
        </script>

en javascript avec cette méthode ne donne rien.
de l'aide s'il vous plaît

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
	  <!-- CSS Gabarit -->
	  <link href="assets/css/plugins/bootstrap.min.css" rel="stylesheet">           <!-- Collapse_0 Bootstrap core CSS -->
	  <link href="assets/css/plugins/slick.css" rel="stylesheet">
	  <link href="assets/css/plugins/ion.rangeSlider.min.css" rel="stylesheet">
	  <link href="assets/css/plugins/magnific-popup.css" rel="stylesheet">
	  <link href="assets/css/style.css" rel="stylesheet">
 
	  <!-- CSS SlideShow -->
	  <link href="assets/css/style_SlideShow.css" rel="stylesheet">   
 
	  <!-- CSS Perso -->
	  <link href="assets/css/Carte.css" rel="stylesheet">  	  
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type='text/css'>
 
	  <!-- Font Gabarit -->
	  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet">
	  <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">
 
 
 
</head>
 
 
 
<body class="btn-style-1 btn-skewed sidebar-style-1" data-bs-spy="scroll" data-bs-target="#section-header" data-bs-offset="196">
 
 
 
 
  <div id="section-services">
	<div class="section section-padding bg-gray" style="background-color: #FEFDF0;">     <!-- FFECDD E4E4CB FFFFF4 -->
      <div class="container">
 
		<!-- Ligne 001 -----------------------------------------------------------------------------------------------------------       -->	
		<div class="row">      							<!-- style="border:1px solid green;" -->
 
			  <!-- Carte I -->
			  <div class="col-lg-4 col-md-6">       <!-- style="border:1px solid black;" -->
 
				<div class="card_section_services">            <!-- style="border:1px solid red;" -->
					<div class="img_section_services">
							<img src="assets/img/Chat_03.jpg" alt="" class="Gabarit_img">
					</div>
 
					<div class="text">
						<h4><span>TITRE PRINCIPAL</span></h4>
						<hr>
						<p style="margin-bottom: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact 
						that a reader will be Lorem ipsum dolor sit amet consectetur.
						</p>
 
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.
						</p>
						<hr class="hr_postion_bas">
 
 
							<div class="login_icon_gauche" id="id1" ><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></div>
							<div class="login_icon_droite" id="id2" ><i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i></div>
							<div class="login_link_central" id="id3"><a>_LINK_</br>CENTRAL</a></div>
 
 
					</div>
 
 
 
					<div class="TxT_btn_gauche target" id="div1">
						<h5>TITRE H5 GAUCHE</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
 
					<div class="TxT_btn_droite target" id="div2">
						<h5>TITRE H5 DROITE</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
					<div class="TxT_btn_central target" id="div3">
						<h5>TITRE_H5</br>CENTRAL</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
				</div>
 
			  </div>
 
		</div>
		<!--       -----------------------------------------------------------------------------------------------------------       -->
 
 
 
      </div>
    </div>
  </div>
 
 
 
 
 
 
	<!--                          Chargement PlugIns                      -->
    <script src="assets/js/plugins/jquery-3.4.1.min.js"></script>
    <script src="assets/js/plugins/popper.min.js"></script>
    <script src="assets/js/plugins/bootstrap.min.js"></script>
    <script src="assets/js/plugins/parallax.min.js"></script>
    <script src="assets/js/plugins/slick.min.js"></script>
    <script src="assets/js/plugins/imagesloaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/plugins/jquery.counterup.min.js"></script>
    <script src="assets/js/plugins/jquery.inview.min.js"></script>
    <script src="assets/js/plugins/ion.rangeSlider.min.js"></script>
    <script src="assets/js/plugins/jquery.validate.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/functions/mf_form.js"></script>
 
	<!-- Collapse -->
	<script src="assets/js/plugins/bootstrap.min.js.téléchargement"></script>
 
 
	<!-- CARTES_SECTION_SERVICES -->
 
 
	<script language="javascript">
	   const btn1 = document.getElementById("id1");
	   const btn2 = document.getElementById("id2");
	   const btn3 = document.getElementById("id3");
	   const txt1 = document.getElementById("div1");
	   const txt2 = document.getElementById("div2");
	   const txt3 = document.getElementById("div3");
 
	   btn1.onclick = function(){
			txt1.style.display = "block";
			txt2.style.display = "none";
			txt3.style.display = "none";
	   }
	   btn2.onclick = function(){
			txt1.style.display = "none";
			txt2.style.display = "block";
			txt3.style.display = "none";
	   }
	   btn3.onclick = function(){
			txt1.style.display = "none";
			txt2.style.display = "none";
			txt3.style.display = "block";
	   }
 
	</script>
 
 
</body>
 
</html>

bonjour,

j'ai bien avancé.
je me suis aperçu que le CSS faisait défaut.

il y a deux choses qui fonctionne pas correctement :
- un fois clic effectuer, la fenêtre enfant s'affiche vers le bas, alors que j'aimerai quel monte directement.
- l'ascenseur CSS ne s'affiche plus, pour je rien changé, à ce niveau

merci pour votre temps

labo

new file CSS :

Code:

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
:root {
 
  /* Couleurs */
  --thm-Fond_Container: #F0FFFF;              	/* Blanc #FFFFFF - Fond Container */
  --thm-Bordure_Container: #DEDEDE;				/* Gris Clair - Fond Container */
 
  --thm-ICOSVG: #626c66;						/* rouge 626c66 */ 
  --thm-ICOSVG-hover: #626c66;					/* rouge */
 
  --thm-TxT_Container: #F0FFFF;             	    /* Blanc */
  --thm-TxT_H5: #2e1c87;						/* bleu foncé */
  --thm-TxT_P: #3e3a3a;					 	    /* gris */
  /* --thm-TxT_P: #fff;	*/					 	/* gris */
 
  --thm-Fond_Asc: #edebeb;              		/* gris clair - Fond de l'ascenseur */
  --thm-Barre_Asc: #ada8a8;              		/* gris foncé - barre de l'ascenseur */
 
 
 
}
 
 
 
/* 	Container Image 	*/
.img_section_services {
	width: 86%;
	box-shadow: 0px 10px 40px rgba(0,0,0,0.5);     /*  Effet Ombre Portée */
	display: block;
	margin-top: 25px;
	margin-left: 7%;
	margin-right: 7%;
	border-radius: 6px;
 
	/* Bordure TxT - Noir */
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: #000; */                          /* Bordure IMG - NOIR */
}
 
 
.Gabarit_img {
	border-radius: 6px;
}
 
 
/* 	 ligne hoizontal   */
hr {
	opacity : 0.8;
	margin-top: -13px;							/* marge avant TxT */
	margin-bottom: 12px;						/* marge avant TxT */
}
 
.hr_postion_bas {
	margin-top: 0px;							/* marge avant TxT */
	margin-bottom: -9px;						/* marge avant TxT */
}
 
 
/* 	 Container Global   */
.card_section_services {
	position: relative;
	width: 100%;
	padding-bottom: 50px;
	background-color: var(--thm-Fond_Container);
	/* box-shadow: 0 21px 35px rgb(0 0 0 / .10); */
	box-shadow: 0 0 10px 2px rgb(0 0 0 / 33%);     /* Décalage Horizontal - Décalage Vertical - Rayon du Flou - Rayon de Propagation - Couleur & Transparence */
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 20px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--thm-Bordure_Container);
 
	border:1px solid red;
}
 
 
 
/*   Container TxT_Principal   */
.card_section_services .TxT_Principal {
	padding: 15px;								/* marge avant TxT */				
 
	/* Bordure TxT - Rouge */
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */
}
 
.card_section_services p {
	color: var(--thm-TxT_P);
	padding-top: 0px;
	margin-bottom: 20px;
	text-align : justify;
	line-height : 150%           				/* définir la hauteur totale de la ligne par rapport à la taille de la police */ 
}
 
.card_section_services h2 {
	font-size: 16px;
	margin-bottom: 0px;
}
 
/* ---       sous_carte                        --- */
.sous_carte {
    background-color:transparent;
    color: var(--thm-ICOSVG);
	text-align: center;
	margin-left: 1px; 
	position: relative;
	/* bottom: 4px; */
	margin-left: 10px;
	cursor: pointer;
	z-index: 19;
	transition: all ease 0.5s;
 
	/* Filtre sur image */
	/* filter: brightness(250%); */ 
	filter: saturate(3);
	/* filter: blur(4px); */
	/* filter: contrast(180%); */
	/* filter: grayscale(100%); */
	/* filter: hue-rotate(180deg); */
	/* filter: invert(100%); */
	/* filter: opacity(50%); */
	/* filter: sepia(100%); */
	/* filter: drop-shadow(8px 8px 10px green); */
	/* -webkit-filter : red(90%);         /* Chrome, Safari, Opera */ 
}
 
.tableau {
	position: absolute;
	display: flex;
	align-content: center;
	justify-content: center;
	width: 100%;
	height:32px;
	bottom: 2px;
	left: 0px;
	/* border:1px solid grey; */
}
 
.gauche {
	align-items: center;
	width: 100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left: 0px;
	margin-right: 20px;
	/* border:1px solid green; */
 
}
 
.milieu {
	align-items: center;
	width: 100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left: 20px;
	margin-right: 20px;
	/* border:1px solid orange; */
}
 
.droite {
	align-items: center;
	width: 100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left: 20px;
	margin-right: 0px;
	/* border:1px solid blue; */
}
 
.card_section_services .sous_carte:hover {
	transform: translate(0, 2px);
	background-color:transparent;
	color: var(--thm-ICOSVG-hover);
}
 
.TxT_sous_carte {
	display:none;
	position: relative;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 100%;										/* Position fenêtre une fois déployée */
	background-color: var(--thm-TxT_Container);
	padding: 15px;										/* marge avant TxT */	
	/* overflow-y: auto; */
	/* transition: all ease 0.7s; */
 
 
}
 
 
.TxT_sous_carte::-webkit-scrollbar {
	width: 7px;
	background-color: var(--thm-Fond_Asc);              
}
 
.TxT_sous_carte::-webkit-scrollbar-thumb {
	background-color: var(--thm-Barre_Asc);               
}
 
.TxT_sous_carte h5 {
	color: var(--thm-TxT_H5);						 
}
 
.TxT_sous_carte p {
	color: var(--thm-TxT_P);
	padding-top: 0px;
	text-align : justify;
	line-height : 150%           					/* définir la hauteur totale de la ligne par rapport à la taille de la police */ 
}
 
.TxT_sous_carte.active {
	bottom: 0;
}

voici le code jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<script>
                $(document).ready(function(){
                 
                          // clic sur les boutons
                          $('.sous_carte').on('click',function(event){
                                        event.stopPropagation();                                                        // important
                                        var id = $(this).data('id');                                            // on récupère le data-id
                                        $(".TxT_sous_carte:not(#box-"+id+")").hide();           // on ferme les box, sauf celle concernée
                                        $("#box-"+id).slideToggle("slow");                                              // on ouvre ou ferme celle concernée
                                        $("#box-"+id).animate({'marginTop' : "-=250px"});
                          });
                          
                          // clic en dehors des div
                          $(window).on('click', function(){
                                        $(".TxT_sous_carte").slideUp();                                                 // on ferme
                          });
 
                });
        </script>

Code:

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
<div class="card_section_services">            <!-- style="border:1px solid red;" -->
					<div class="img_section_services">
							<img src="assets/img/Chat_03.jpg" alt="" class="Gabarit_img">
					</div>
 
					<div class="TxT_Principal">
						<h4><span>TITRE PRINCIPAL</span></h4>
						<hr>
						<p style="margin-bottom: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact 
						that a reader will be Lorem ipsum dolor sit amet consectetur.
						</p>
 
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.
						</p>
						<hr class="hr_postion_bas">
 
						<div class="tableau">
							<div class="sous_carte gauche" data-id="1"><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></div>
							<div class="sous_carte milieu" data-id="2"><i class="fa fa-exclamation fa-2x" aria-hidden="true"></i></div>
							<div class="sous_carte droite" data-id="3"><i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i></div>
						</div>
 
					</div>
 
 
					<div class="TxT_sous_carte" id="box-1">
						<h5>TITRE H5 GAUCHE</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
 
 
					<div class="TxT_sous_carte" id="box-2">
						<h5>TITRE_H5</br>CENTRAL</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
 
 
					<div class="TxT_sous_carte" id="box-3">
						<h5>TITRE H5 DROITE</h5>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. It is a long established fact that a reader will be Lorem 
						ipsum dolor sit amet consectetur.</p>
					</div>
 
 
 
				</div>
 
			  </div>

04/02/2023, 16h51
LS_Soleil

j'ai trouvé ce qui n'allez pas.
encore le css à épurer.

par contre, j'ai un effet bizarre lors de la montée de la fenêtre.
pourtant, il y a 1 seul effet en CSS.

de l'aide, s'il vous plaît, là, ce sèche

url

Bonjour,
peut-être pas sûr d'avoir bien compris mais :

Citation:

y a t-il une solution en exploitant uniquement le CSS et HTML?

essaies ce simple code pour te rendre compte :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style> [id^="id"] { display: none; background: #DEF; width: 10em; height: 10em; } .hover-me:hover + div { display: block; } </style> <p class="hover-me">Détails 1</p> <div id="id_1">Blabla 1</div> <p class="hover-me">Détails_2</p> <div id="id_1">Blabla 2</div>
... c'est pour une approche avec le sélecteur de frère adjacent.