<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- We will create a family tree using just CSS(3) The markup will be simple nested lists --> <div class="tree" id = "div1"> <ul> <li> <a href="#">Rôle de vie du quartier</a> <ul> <li> <a href="#">Chaib Wahid <figure class="img"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXqJDNNN+gcAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="rouge"> <figcaption>Responsable culture et intergénérationnel Organisateur de spectacles incluant la population de Saint Jean ect</figcaption> </figure> </a> <ul> <li> <a href="#">Laure Gandolfi <figure class="img"> <img src="https://www.grandlyon.com/fileadmin/user_upload/media/images/institution/elus/gandolfi_laura_villeurbanne_alpaca_900.jpg" alt="Laure Gandolfi"> <figcaption>Adjointe au maire de Villeurbanne déléguée à St jean vice-présidente de la Métropole de Lyon Politiques de solidarités en direction des personnes âgées et personnes en situation de handicap</figcaption> </figure> </a> <ul> <li> <a href="#">Samira Yousfi <figure class="img"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXqJDNNN+gcAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="rouge"> <figcaption>Représentante du conseil de quartier</figcaption> </figure> </a> <ul> <li> <a href="#">Sofia Benkaddour <figure class="img"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXqJDNNN+gcAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="rouge"> <figcaption>Présidente les Chalets</figcaption> </figure> </a> <ul> <li> <a href="#">Soraya Hadjara <figure class="img"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXqJDNNN+gcAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="rouge"> <figcaption>Représentante Nous & Vous</figcaption> </figure> </a> <ul> <li> <a href="#">Djamila Lallali <figure class="img"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEXqJDNNN+gcAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC" alt="rouge"> <figcaption>Présidente Centre d’animation</figcaption> </figure> </a> <!-- Copier coller la séquence ci-dessous après le "</a>" pour ajouter un acteur <ul> <li> <a href="#">Nom Prénom <figure class="img"> <figcaption>Description acteur</figcaption> </figure> </a> --> </li> </ul> </li> </ul> </li> </ul> </div> <div class="tree" id= "div2"> <ul> <li> <a href="#">Rôle d'usager</a> <ul> <li> <a href="#">Habitants du quartier <figure class="img"> <img src="https://www.amiens.fr/var/ez_website/storage/images/media/images/jda/jda-2019/jda-901/amiens-regagne-des-habitants/252815-1-fre-FR/Amiens-regagne-des-habitants_format_610x450.jpg" alt="Laure Gandolfi"> <figcaption>Choisissent leurs représentants au conseil de quartier</figcaption> </figure> </a> <ul> <li> <a href="#">Conseil du quartier <figure class="img"> <img src="data:image/jpeg;base64,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" alt="Laure Gandolfi"> <figcaption>Rapporte les revendications des habitants à la ville de Villeurbanne</figcaption> </figure> </a> <ul> <li> <a href="#">Conseil citoyen <figure class="img"> <figcaption></figcaption> </figure> </a> <!-- Copier coller la séquence ci-dessous après le "</a>" pour ajouter un acteur <ul> <li> <a href="#">Nom Prénom <figure class="img"> <figcaption>Description acteur</figcaption> </figure> </a> --> </li> </ul> </li> </ul> </li> </ul> </div>

/*Now the CSS*/ * {margin: 0; padding: 0;} .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .tree li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } figure { width:300px; border:5px ridge grey; position:relative; } img { width:100%; vertical-align:top; } figcaption { opacity:0; background-color: AntiqueWhite; text-align:center; position:absolute; bottom:0; left:0; right:0; border: black; } figure:hover figcaption { transition:all 1s; opacity:1; } /*Thats all. I hope you enjoyed it. Thanks :)*/