Effet sur image lors du survol de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet sur image lors du survol de la souris

Message par KumixKumi le Ven 7 Mar 2014 - 23:15

Bonjour, je vous expose la situation. Et bien en fait cela fait un petit moment que je cherche à trouver un code qui permettrait de faire des effets tels que celui là (Le petit carré aux formes arrondies qui devient rond au passage de la souris):

Spoiler:
http://runaway-baby.forumactif.org/t562-danny-il-etait-temps-que-je-montre-le-bout-de-mon-nez

Evidemment je ne demande pas à avoir le même effet mais quelque chose qui s'y rapproche, ou éventuellement une forme circulaire qui tourne, toujours au passage de la souris, enfin j'espère  que vous voyez ce dont quoi je parle.

Sur ce, merci de m'aider.


Dernière édition par KumixKumi le Sam 8 Mar 2014 - 13:15, édité 1 fois

KumixKumi
Nouveau membre

Messages : 4
Inscrit(e) le : 01/03/2014

http://blackwell-pensionnat.forumactif.org/
KumixKumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet sur image lors du survol de la souris

Message par MlleAlys le Sam 8 Mar 2014 - 11:02

Bonjour,
il faut pour cela utiliser le css :
- par exemple, border-radius est la propriété css qui permet d'arrondir les coins d'un élément, comme par exemple une image. La propriété transform permet quant à elle une rotation de l'élément.
exemple :
code html :
Code:
<img src="URL" class="arrondi" />
code css
Code:
.arrondi {
    border-radius:10px;
}
Ce code affichera une image avec un arrondi aux coins d'un rayon de 5px
- la pseudo class :hover attribuée à un élément dans le css permet d'appliquer les propriétés au passage de la souris sur l'élément.
exemple :
Si on ajoute au code css précédent celui ci :
Code:
.arrondi:hover {
    border-radius:50px;
}
Alors au passage de la souris sur l'image, celle-ci va avoir un arrondi d'un rayon de 50px.
- enfin, la propriété transition permet de faire l'effet de transition (comme son nom l'indique xDD) entre les deux états. Il faut y indiquer la propriété concernée par la transition, la durée de la transition, et le type d'accélération (par exemple "ease" est plus fluide, "linear" un une vitesse de transition constante. Cependant, cette propriété n'est pas encore parfaitement supportée par tous les navigateurs, et il faut préciser les préfixes comme -webkit- , -moz- etc devant.
exemple :
En gardant le même code html, et avec ce code complet css :
Code:
.arrondi {
   border-radius:10px;
   -webkit-transition: border-radius 1s ease; /*pour chrome et safari*/
   -moz-transition: border-radius 1s ease; /*pour mozilla*/
   -o-transition: border-radius 1s ease; /*pour opera*/
   transition: border-radius 1s ease; /*propriété générale*/
}
.arrondi:hover {
   border-radius:50px;
}
permet d'avoir une image dont l'arrondi à 10px va augmenter au passage de la souris jusque 50px ^^

Enfin, n'hésitez pas à aller chercher des informations sur les différentes propriétés css qui vous intéressent sur internet ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet sur image lors du survol de la souris

Message par KumixKumi le Sam 8 Mar 2014 - 13:15

Merci beaucoup ! Je passe le sujet en "révolu" ! Very Happy

KumixKumi
Nouveau membre

Messages : 4
Inscrit(e) le : 01/03/2014

http://blackwell-pensionnat.forumactif.org/
KumixKumi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum