#start{ section{ position: relative; margin-top: -10px; margin-bottom: 100px; padding-top: 5px; & > h2, & > h3{ text-align: center; } h3{ width: 100%; } } h2{ text-align: center; width: 350px; background: white; z-index: 1; margin: auto; margin-top: -35px; } .filet{ z-index: -1; width: auto; height: 2px; background: black; } #home{ width: 60%; margin: 0 auto 100px auto; } #metier{ background: #bd9a8428; display: inline-flex; flex-wrap: wrap; justify-content: space-around; .block{ width: 35%; min-width: 350px; &:nth-of-type(n+3){ position: relative; .title{ position: absolute; z-index: 1; transform: rotate(-35deg); background: red; } .img{ height: auto; position: relative; .content{ position: absolute; top: 0; left: 0; display: none; height: 100%; background: #0f265cff; opacity: 0.9; p,ul,li{ color: white; } } &:hover{ .content{ display: block; } } } } } } #référence{ background: #fff59b8c; } #contact{ display: inline-flex; width: 100%; p{ &:nth-of-type(1){ width: 60%; } &:nth-of-type(2){ width: 40%; } } .block{ display: none; } } }