Transition changement d'image
Résolu
MrWhitediamond
Messages postés
31
Date d'inscription
Statut
Membre
Dernière intervention
-
MrWhitediamond Messages postés 31 Date d'inscription Statut Membre Dernière intervention -
MrWhitediamond Messages postés 31 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous !
J'ai besoin de votre aide car je souhaiterai réaliser une transition lors d'un changement d'image, lors du passage de ma souris sur l'un des liens (voire mon problème : url:"http://project-australia.esy.es/").
CSS du carde image :
Html d'un des liens :
Script Java pour changer l'url au passage de la souris :
Merci d'avance pour votre aide :)
MrWhitediamond
P.S: C'est un blog que je dois réalisé pour mes cours d'anglais.
J'ai besoin de votre aide car je souhaiterai réaliser une transition lors d'un changement d'image, lors du passage de ma souris sur l'un des liens (voire mon problème : url:"http://project-australia.esy.es/").
CSS du carde image :
.image {
background: url(Images/Photo-Header-Main2.png);
background-repeat: no-repeat;
background-position: 100% 0%;
position:relative;
left:-20px;
width: 104%;
height: 279px;
border-radius:17px;
box-shadow: 4px 4px 10px #1c1a19;
text-align:left;
}
Html d'un des liens :
<a href="Home.html" data-image="Images/Photo-Header-Main2.png" id="Home_link" title="[/download/telecharger-34085672-kipicam Home]">Home</a>
Script Java pour changer l'url au passage de la souris :
$(document).ready(function(){
$('.navigation a').hover(function(){
$('.image').css('background-image','url('+$(this).data('image')+')');
});
});
Merci d'avance pour votre aide :)
MrWhitediamond
P.S: C'est un blog que je dois réalisé pour mes cours d'anglais.
A voir également:
- Transition changement d'image
- Changement dns - Guide
- Image iso - Guide
- Changement d'écriture facebook - Guide
- Changement d'heure - Guide
- Acronis true image - Télécharger - Sauvegarde
1 réponse
Bonjour MrWhitediamond,
Tu peux simplement utiliser la propriété css "transition" afin de donner un effet de transition simple à tes images.
Dès que le
exemple : http://jsfiddle.net/6wbyf5kg/
A propos de la propriété transition : https://www.w3schools.com/css/css3_transitions.asp
--
Tu peux simplement utiliser la propriété css "transition" afin de donner un effet de transition simple à tes images.
transition: background-image 300ms ease; -webkit-transition: background-image 300ms ease;
Dès que le
background-imagede ton bloc va changer il va le faire avec les paramètres que tu as donnés dans la propriété
transition.
exemple : http://jsfiddle.net/6wbyf5kg/
A propos de la propriété transition : https://www.w3schools.com/css/css3_transitions.asp
--
Je te conseil d'essayer de changer ton approche concernant le changement d'image au hover, soit par la structure HTML ou la méthode par laquelle tu change l'image, cela te permettra peut-être de trouver tes propres solutions. Il y a toujours plusieurs façon de faire les choses.
Tu pourras utiliser ceci pendant tes essais qui te permettrons aussi de faire des transitions :
- La fonction "animate" de jQuery : https://api.jquery.com/animate/
- Les fonctions "fadeIn" et "fadeOut" de jQuery : https://api.jquery.com/fadeIn/ https://api.jquery.com/fadeout/