J'utilise actuellement la transition CSS3 scale() pour créer un effet de survol sur mes images, mais je souhaite conserver les mêmes dimensions de l'image de survol. Ainsi, l'effet est que l'image effectue un zoom avant, mais elle reste contrainte à sa largeur et sa hauteur existantes.Comment masquer le débordement sur le zoom de l'image lorsque vous ne pouvez pas envelopper l'image dans un div?
J'ai trouvé d'autres réponses qui exigent que ceci est réalisé en enveloppant l'image dans un <div> et en ajoutant overflow: hidden à cet élément. Cependant, c'est là que ma situation particulière devient un peu difficile.
J'utilise cet effet pour les vignettes d'images sur ma liste d'articles de blog récents, qui sont affichés en utilisant l'élément intégré des messages récents de mon thème Wordpress. En d'autres termes, je n'ai pas le moyen de modifier cet élément et d'envelopper les images dans un <div>. J'espère que quelqu'un ici pourra m'aider à trouver une autre façon d'obtenir le résultat souhaité.
Le thème Wordpress est appelé thème X. Les messages récents shortcode est affiché comme [recent_posts count="1"], mais cela est le code réel qui est utilisé (via le code source de la page):
<div class="x-recent-posts cf horizontal" data-x-element="recent_posts" data-x-params="{"fade":false}" data-fade="false" >
<a class="x-recent-post1 with-image" href="http://demo.theme.co/integrity-1/5-reasons-you-need-the-x-theme/" title="Permalink to: "5 Reasons You Need The X Theme"">
<article id="post-1135" class="post-1135 post type-post status-publish format-standard has-post-thumbnail hentry category-top-10 tag-ponder tag-reflective tag-standard tag-training tag-wisdom tag-x">
<div class="entry-wrap">
<div class="x-recent-posts-img" style="background-image: url(http://demo.theme.co/integrity-1/wp-content/uploads/sites/23/2013/05/x-theme.jpg);">
</div>
<div class="x-recent-posts-content">
<h3 class="h-recent-posts">5 Reasons You Need The X Theme</h3>
<span class="x-recent-posts-date">May 1, 2014</span>
</div>
</div>
</article>
</a>
</div>
Et c'est le CSS que je utilise pour créer l'effet de zoom:
.x-recent-posts .has-post-thumbnail .x-recent-posts-img {
transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
}
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img {
transform: scale(1.05);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
}
J'ai essayé d'ajouter overflow: hidden à peu près toutes les classes de <div> dans ce HTML, mais qui ont encore pas de chance en gardant l'image contraint à sa taille d'origine. J'ai essayé de créer un violon montrant comment l'élément se comporte, mais comme l'élément est lié à mon thème, il ne s'affiche pas correctement. Au lieu de cela, voici un fichier GIF rapide le montrant: https://gyazo.com/117a8247692d0074948ccdf406381057
Comme vous pouvez le voir, l'image déborde dans la zone de contenu. Ce n'est pas le plus gros problème au monde, mais dans d'autres domaines du site, il chevauche parfois le titre. J'apprécierais vraiment tous ceux qui peuvent m'aider à comprendre cela.