Effet de zoom sur une image de fond en CSS
Un effet de zoom directement sur la balise img est simple, car il n’a d’influence sur rien d’autre (tout au plus, le conteneur de l’image doit avoir overflow: hidden;).
Mais si l’image est un fond (background-image), agrandir le bloc agrandit l’image de fond et tout le reste du contenu du bloc (tous les textes, blocs, etc. deviennent eux aussi plus grands). Il faut donc penser aussi à la partie HTML et placer l’image de fond dans un bloc séparé.
Exemple :
<style>
.home_category_item {
position: relative;
float: left;
width: 50%;
overflow: hidden;
}
.home_category_item_in {
position: relative;
display: block;
height: 650px;
line-height: 650px;
background-color: #DADADA;
text-align: center;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
}
.home_category_item_in_in {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
transition: all .5s;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.category_image_1 {
background-image: url("../../img/home/category_image_1.jpg");
}
.category_image_2 {
background-image: url("../../img/home/category_image_2.jpg");
}
.category_image_3 {
background-image: url("../../img/home/category_image_3.jpg");
}
.home_category_item:hover .home_category_item_in_in,
.home_category_item:focus .home_category_item_in_in {
transform: scale(1.1);
}
</style>
<span class="home_category_item">
<span class="home_category_item_in">
<span class="home_category_item_in_in category_image_1"></span>
</span>
</span>