comment zoomer une image dans le cadre

Dans ma page Web, je me suis fatigué de faire une galerie d'images de type grille.Je veux sur l'image en vol stationnaire doit être zoomée dans le cadre. (Exemple: http://cad180.com/About) [sur les images de survol sont zoomés dans le cadre].comment zoomer une image dans le cadre

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
.zoom { 
 
    cursor: pointer; 
 
    transition: all .5s ease; 
 
} 
 

 
.zoom:hover { 
 
    transform: scale(1.2, 1.2); 
 
} 
 

 
.gal img { 
 
    width: 100%; 
 
    padding: 7px 0; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="gal"> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

S'il vous plaît me aider à faire cela aussi la partie médiane et les images de partie droite ne sont pas correctement .help me zoom s'il vous plaît. MY DEMO CODE

Source

2017-10-03 mr.tanmay

simplement vous devez envelopper votre élément img avec un div et faire overflow: hidden sur elle:

.grid { 
    overflow: hidden; 
}

JSFiddle

pour votre deuxième problème, vous devez utiliser backface-visibility: hidden; pour y remédier. en savoir plus à ce sujet here.

Source

2017-10-03 11:39:54 Pedram

merci pour cela, mais le côté droit et le côté du milieu ne fonctionne pas correctement sur le vol stationnaire –

@ mr.tanmay s'il vous plaît voir le violon mis à jour – Pedram

merci beaucoup :) –

Enveloppez vos images dans des conteneurs et ajouter overflow: hidden; aux conteneurs.

éliminent également le remplissage des éléments et le style img l'espacement sur les récipients.

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
    display: block; 
 
} 
 

 
.image-container { 
 
    overflow: hidden; 
 
    margin: 14px 0; 
 
} 
 

 
.zoom { 
 
    cursor: pointer; 
 
    transition: all .5s ease; 
 
} 
 

 
.zoom:hover { 
 
    transform: scale(1.2); 
 
} 
 

 
.gal img { 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <ul class="gal"> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-10-03 11:41:29

métier à tisser à droite images latérales et moyennes .. Elles ne sont pas affichées correctement au moment du zoom –

comment zoomer une image dans le cadre

Répondre

Questions connexes