#cibler_adjascent_avance { min-height: 300px; img { height: 300px; position: absolute; z-index: 2; } .go_button ~ .default_invisible { opacity: 0; visibility: hidden; img { border: 4px solid pink; } } div#last_trigger { transition: none; } /* TOUT .default_invisible Au meme niveau (meme parent) ... que .go_button sera affecté (quand .go_button:hover) */ .go_button:hover ~ .default_invisible { opacity: 1; visibility: visible; position: absolute; img { border: 4px solid blue; } } .go_button + div#content_trigger { right: 500px; z-index: 2; } /* 2 == #second_trigger */ .go_button + div + div#second_trigger { right: 300px; z-index: 3; } /* 3 == #last_trigger */ .go_button:hover + div + div + div#last_trigger { right: 730px; margin-right: 350px; transition: margin 1s ease 0s, opacity 0s ease 0.1s; } .go_button ~ .default_invisible > .sub_child { position: relative; right: -300px !important; opacity: 0; transition: all 5s ease 0.1s; } .go_button:hover ~ .default_invisible > .sub_child { visibility: visible; right: 0 !important; opacity: 1; transition: all 1s ease 0.1s, right 2s ease-out 0s; z-index: 1; } .go_button:hover + div + div + div#last_trigger img { outline: 3px solid red; } .go_button:hover + div + div + div#last_trigger > span > img[src*="_alt"] { outline: 4px solid yellow; } img[alt="cat_3"] { right: 50px; } .go_button:hover + div + div + div#last_trigger img[src*="_alt"], .go_button:hover + div + div + div#last_trigger > span > img { position: absolute; transform: rotateY(180deg); } .go_button + div + div + div#last_trigger + #trigger_oublie { left: 500px; bottom: 0; opacity: 1; visibility: visible; position: absolute; img { position: relative; z-index: 0; outline: 3px solid yellow; height: 300px; } } }