IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

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


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut Overlay - Superposer une image par du texte correspondant, au survole d'un texte (Jquery)
    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 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
    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>

  2. #2
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2012
    Messages
    122
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : novembre 2012
    Messages : 122
    Points : 163
    Points
    163
    Par défaut
    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 ?

  3. #3
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 666
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 666
    Points : 14 697
    Points
    14 697
    Par défaut
    je vois déjà l'effet de survol avec votre code, que cherchez vous comme résultat ?

  5. #5
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2012
    Messages
    122
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : novembre 2012
    Messages : 122
    Points : 163
    Points
    163
    Par défaut
    OK, tu as plusieurs erreurs dans ton CSS actuel :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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...)

  6. #6
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    Citation Envoyé par mathieu Voir le message
    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

    Nom : Process.jpg
Affichages : 97
Taille : 43,5 Ko

  7. #7
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    c'est un bon début, mais cela ne coulisse pas
    en survolant l'icone "60", je superpose une texte sur l'image
    Nom : _1_16.jpg
Affichages : 84
Taille : 29,1 Ko
    en survolant l'icone "45", je superpose une texte sur un autre texte
    Nom : _1_17.jpg
Affichages : 86
Taille : 2,0 Ko
    Nom : _1_18.jpg
Affichages : 87
Taille : 63,5 Ko

    index.html
    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
    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 : 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
    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;
    }

  8. #8
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 666
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 666
    Points : 14 697
    Points
    14 697
    Par défaut
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    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>

  9. #9
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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

  10. #10
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 666
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 666
    Points : 14 697
    Points
    14 697
    Par défaut
    je n'ai pas compris, quel est le souci avec les fichiers qui sont dans l'archive ?

  11. #11
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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

  12. #12
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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

    Nom : A.jpg
Affichages : 35
Taille : 55,3 Ko
    Nom : C.jpg
Affichages : 31
Taille : 60,1 Ko
    Nom : D.jpg
Affichages : 37
Taille : 45,2 Ko
    Nom : B.jpg
Affichages : 35
Taille : 80,6 Ko

    merci de votre temps

  13. #13
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2012
    Messages
    122
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : novembre 2012
    Messages : 122
    Points : 163
    Points
    163
    Par défaut
    Si tu fait coulisser en JS ?, tu descend tous les éléments qui ont la classe de coulisse et tu monte celle demandée.

  14. #14
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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 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
    	<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>

  15. #15
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    en javascript avec cette méthode ne donne rien.
    de l'aide s'il vous plaît

    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
    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>

  16. #16
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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 : 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
    :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 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
    	<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 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
    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>

  17. #17
    Membre à l'essai
    Homme Profil pro
    manutentionnaire
    Inscrit en
    décembre 2020
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : manutentionnaire

    Informations forums :
    Inscription : décembre 2020
    Messages : 31
    Points : 13
    Points
    13
    Par défaut
    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

  18. #18
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 363
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 363
    Points : 42 031
    Points
    42 031
    Par défaut
    Bonjour,
    peut-être pas sûr d'avoir bien compris mais :
    y a t-il une solution en exploitant uniquement le CSS et HTML?
    essaies ce simple code pour te rendre compte :
    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
    <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.

Discussions similaires

  1. Superposer une image et un texte
    Par toitoinebzh dans le forum PyQt
    Réponses: 2
    Dernier message: 16/01/2020, 21h51
  2. Réponses: 1
    Dernier message: 09/06/2009, 13h38
  3. [RegEx] Remplacer une image par un texte ou rien
    Par gtraxx dans le forum Langage
    Réponses: 4
    Dernier message: 05/12/2008, 21h57
  4. superposer une image et du texte
    Par boutmos dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 20/11/2008, 17h04
  5. [FPDF] Intégration d'une image par rapport au texte
    Par navis84 dans le forum Bibliothèques et frameworks
    Réponses: 5
    Dernier message: 12/03/2007, 10h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo