Bonsoir à toutes et à tous.
Voici mon problème : je travaille actuellement sur un portfolio pour mon DUT, et nous avons pour consigne d'intégrer des productions sur une page. Vu que je suis un glandu, j'ai pris les dessins d'une amie, et je les ai mis dans un tableau (trois colonnes et 4 lignes). De plus, j'ai trouvé sur internet un bout de css qui me permet de faire un zoom sur l'image au survol de celle ci. Et c'est ici que ça coince : c'est parfait pour les images à l'horizontale, mais pour sa pièce maîtresse à la verticale, c'est forcément tout compressé
Du coup j'aurais aimé fusionner deux cellules (verticalement) afin que ce dessin s'affiche correctement.
Débutant en Html / Css, je galère un peu
Voici la forme de mon code :
Et le CSS (juste la partie du zoom) :
Des idées ?
Merci d'avance !
Voici mon problème : je travaille actuellement sur un portfolio pour mon DUT, et nous avons pour consigne d'intégrer des productions sur une page. Vu que je suis un glandu, j'ai pris les dessins d'une amie, et je les ai mis dans un tableau (trois colonnes et 4 lignes). De plus, j'ai trouvé sur internet un bout de css qui me permet de faire un zoom sur l'image au survol de celle ci. Et c'est ici que ça coince : c'est parfait pour les images à l'horizontale, mais pour sa pièce maîtresse à la verticale, c'est forcément tout compressé
Du coup j'aurais aimé fusionner deux cellules (verticalement) afin que ce dessin s'affiche correctement.Débutant en Html / Css, je galère un peu
Voici la forme de mon code :
<body>
<table>
<tr>
<td> <li class="zoomarticle"> <div class="article_big_img"> <img> </li> </div> </td>
<td> <li class="zoomarticle"> <div class="article_big_img"> <img> </li> </div> </td>
<td> <li class="zoomarticle"> <div class="article_big_img"> <img> </li> </div> </td>
</tr>
//etc ... sur 4 lignes
</table>
</body>
Et le CSS (juste la partie du zoom) :
.zoomarticle {
height: auto;
float: left;
margin-bottom: 1.65em;
margin-left: 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
}
.article_big_img {
width: 365px;
height: 195px;
overflow: hidden;
padding: 2px;
}
.article_big_img > img {
width: 365px;
height: 195px;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.zoomarticle:hover > .article_big_img > img {
transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
}
Des idées ?
Merci d'avance !
