28172 sujets

CSS et mise en forme, CSS3

[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)
Bonjour,

Votre problème semble venir d’une incompatibilité entre les dimensions des images et les styles CSS appliqués. Voici quelques pistes pour résoudre ce souci :

Adapter les dimensions des images : Assurez-vous que vos images ont des dimensions proportionnelles à celles définies dans votre CSS. Utilisez des outils comme Photoshop ou GIMP pour redimensionner vos fichiers avant de les intégrer.

Mise à jour du CSS : Vous pourriez simplifier votre code en ajoutant des règles de confinement (par exemple, overflow: hidden;) pour éviter que les images dépassent du cadre défini par .slider-container. Exemple :

.slider-container {
    position: relative;
    overflow: hidden;
}


Utilisation de plugins WordPress : Si vous préférez éviter de coder, des plugins comme Slider Revolution ou MetaSlider permettent d’intégrer des galeries et des sliders sans effort.

Pour plus d'aide et des conseils personnalisés, je vous invite à consulter cette agence spécialisée dans la création de site web , qui pourra vous accompagner dans l'optimisation de votre projet.

N'hésitez pas à me faire savoir si vous avez besoin d'autres conseils !
Prévenir un modérateur
Répondre au sujet
Aller à