Curseur avec une image une image

Question

Bonjour la Communauté je suis verrouillé avec mon curseur et deux image sur la position absolue/relative? J'utilise bxslider

Pouvez-vous m'aider s'il vous plaît?

C'est le lien http://pier17.fr/beta-sanem/nos-realisations.html

Ceci est mon code HTML:

   <div id="slider-realisations"> 
        <ul class="bxslider"> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
        </ul> 
       </div> 

Et ceci est mon CSS:

#slider-realisations .bxslider { 
    text-align: center; 
} 
#slider-realisations .bxslider img { 
    width: auto; 
} 
#slider-realisation { 
    position: relative; 
} 
#slider-realisations .slide-bloc { 
    position: relative; 
} 
#slider-realisations .bxslider img.contour { 
    position: relative; 
    width: 100%; 
    margin-left: 27px; 
} 
#slider-realisations .bxslider img.slide-maison { 
    width: 913px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 16px; 
    padding-top: 105px; 
} 

Si une personne a une solution, je suis prêt .

Merci beaucoup

Answer 1

Problème résolu:

POUR LA CSS:

#slider-realisations { 
     position: relative; 
     overflow: hidden; 
    } 
    #slider-realisations .realisations img { 
     width: 100%; 
    } 
    #slider-realisations .realisations img.contour { 
     position: relative; 
     z-index: 10; 
     width: 100%; 
     height: auto; 
    } 
    #slider-realisations .realisations img.slide-maison { 
     position: absolute; 
     z-index: 5; 
     top: 0%; 
     max-width: 100%; 
     padding-right: 155px; 
     padding-top: 107px; 
     padding-left: 90px; 
    } 

POUR LE HTML:

<div id="slider-realisations"> 
    <ul class="realisations"> 
    <li> 
     <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
     <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
    </li>  <li> 
     <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
     <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
    </li> 
    </ul> 

Answer 2

Le problème est votre CSS. Vous devez faire le parent par rapport

.slide-bloc { 
    position: relative; 
} 

ET CESSEZ vos enfants dans l'absolu

img.contour { 
    position: absolute; 
}