[Résolu] Images qui dépasse du cadre page web en hover.

http://Bonjour/Bonsoir,
J'ai repris le codage que j'avais abandonné y a quelques temps, donc il est possible qu'il est une solution simple ou des erreurs évidentes, j'ai bidouillée en allant au plus compliqué parfois je sais, mais là j'en arrive à un point où je bloque.

Globalement, j'ai un document JS qui me permet de slide les images que j'ai intégré, problème quand je passe dessus elle dépasse du cadre. J'ai essayer de changer le type de position, les valeur width et height, ce qui me permet de pas les faire dépasser mais en contre partie mon slide fait 1/4 de ma page, la seule chose que je n'ai pas touché c'est le margin car je doute que ça règle mon problème.

Voilà, merci d'avance.

.slider-container { position: fixed; 
  top: 380px;
  left: 750px;
  height: 80%; width: 10px;
  background-position: center ;
  background-size: cover ;
  display: inline-flex;
  justify-content: center;}

.slider-images { display: flex; align-items: center; gap: 15px;
  height: 50% ; }

.slider-images img {width: 100% ;
height:70% ;
object-fit: cover;
border-radius: 10px;}

.slider-img {width: 180px ;  
position: relative;
    object-fit: cover;
    cursor: pointer;
    transition: 0.7s ease;} 

.slider-images .slider-img:first-child, .slider-images .slider-img:last-child 
{ height: 380px; }
.slider-images .slider-img:nth-child(2), .slider-images .slider-img:nth-child(6)
{ height: 460px; }
.slider-images .slider-img:nth-child(3),  .slider-images .slider-img:nth-child(5) 
{ height: 560px; }
.slider-images .slider-img:nth-child(4){ height: 600px; }


h1{font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    color: #701818;
    position: absolute;
    top: 40%;
    left: -10%;
    transform: rotate(270deg);
    transition: 0.5s ease-out;}
  
  
h11{font-family: "Jost", sans-serif;
  font-size: 45px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  color: #e0822a;
  position: absolute;
  display: none;
  top: 28%;
  left: 7%;
  overflow: hidden;
  transition: 0.1s ease-in-out;}

  .details{position: absolute;
    top: 45%;
    bottom: 43px;
    left: 43px;}

  .details h2 {font-family: "Jost", sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-align: left;
    line-height: 33px;
    text-align: left;
    color: #b83737;
    text-transform: uppercase;
    transition: 0.01s ease;
    display: none;
  top: 35px }

  .details p{font-family: "Jost", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    line-height: 33px;
    text-align: left;
    color: #a81b1b;
    text-transform: uppercase;
    transition: 0.01s ease;
    display: none;}

  .slider-img:hover{ width: 566px !important;
      height: 650px !important;
    margin: 0px;}

  .slider-img:hover h1{display: none;}
  
    .slider-img:hover h11{display: block;}
  
    .slider-img:hover.details p, .slider-img:hover .details h2 {display: block;}

<section class="slider-container">
   <div class="slider-images">
    <div class="slider-img">
    <img src="Images used/CM1 TDM Rayons X.jpg" alt="1"/>
    <h1>TDM Rayons X</h1>
    <h11>TDM Rayons X</h11>
        <div class=" details">
            <h2>CM 1</h2>
<p>Bio</p>
        </div>
    </div>
   <div class="slider-img">
    <img src="Images used/CM2 Ultrasons.jpg" alt="2" />
    <h1>Ultrasons</h1>
    <h11>Ultrasons</h11>
    <div class="details">
      <h2>CM 2</h2>
      <p>Bio</p>
    </div>
  </div>
  <div class="slider-img">
    <img src="Images used/CM3 Scintigraph.jpg" alt="3" />
    <h1>Scintigraphie</h1>
    <h11>Scintigraphie</h11>
    <div class="details">
      <h2>CM 3</h2>
      <p>Bio</p>
    </div>
  </div>
  <div class="slider-img active">
    <img src="Images used/CM4.1 TEP.jpg" />
    <h1>TEP</h1>
    <h11>TEP</h11>
    <div class="details">
      <h2>CM 4.1</h2>
      <p>Bio</p>
    </div>
  </div>
  <div class="slider-img">
    <img src="Images used/CM4.2 Radiothérapie.jpg" alt="5" />
    <h1>Radiothérapie</h1>
    <h11>Radiothérapie</h11>
    <div class="details">
      <h2>CM 4.2</h2>
      <p>Bio</p>
    </div>
  </div>
  <div class="slider-img">
    <img src="Images used/CM5 IRM.jpg" alt="6" />
    <h1>IRM</h1>
    <h11>IRM</h11>
    <div class="details">
      <h2>CM 5</h2>
      <p>Bio</p>
    </div>
  </div>
  <div class="slider-img">
    <img src="Images used/ED1 Rayons X et imagerie.jpg" alt="7" />
    <h1>Rayons X et imagerie</h1>
    <h11>Rayons X et imagerie</h11>
    <div class="details">
      <h2>ED1</h2>
      <p>Bio</p>
    </div>
  </div>
</div>
</section>
          <script src="jQuery.js"></script>
          <script>
          jQuery(document).ready(function ($) {
            $(".slider-img").on("click", function () {
              $(".slider-img").removeClass("active");
              $(this).addClass("active");});});
          </script>

Modifié par Assasinne (02 Aug 2024 - 01:38)