Bonjour,

Actuellement je développe un site web en HTML, en CSS et en JavaScript.

Je cherche depuis quelque temps un moyen pour reproduire un effet que l'on trouve sur ce site : https://www.fermedubec.com/

Les images, pour information, sont des liens avec un texte au centre de type <span> avec un petit effet sympa car au moment où on les survole, il y a un léger zoom.

Merci d'avance pour vos réponses !!

-
Edité par Titicplusplus 2 février 2020 à 19:54:53

Salut ! Je t'ai fait ça en HTML + CSS

J'ai pas un bac +5 en HTML/CSS mais ça fonctionne 

HTML : 

<div class="zoom">
    <span> Hello World </span>
</div>

CSS :

.zoom{
	display: table-cell;
	height: 500px;
	width: 1025px;
	text-align: center;
	vertical-align: middle;
	background: url("https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg") no-repeat center; /* Change l'URL par l'image que tu souhaites */
	background-size: 100%;
	border: 3px solid black;
	transition: 1.2s; /* Le délai où l'image va dé-zoomer */
}

.zoom:hover{
	background-size: 120%; /* La taille de l'image une fois que le curseur sera sur le DIV */
	transition: 1.2s; /* Le délai du zoom de l'image */
}

.zoom > span{
	font-size: 1.5em;
}

Coucou Luruk-Hai

Merci pour ta réponse, j'ai essayé et ça a marcher !!

C'est parfaitement ce que je voulais !!