-
Images recto verso ou effet fondu passage souris
UNIQUEMENT en CSS
- Effet rotatif Axe Vertical au passage de la souris
---- --
- Effet fondu
- Sinon, avec javascript activé sur le compte eklablog je crois, la solution: onmouseover, onmouseout
le fondu est plus raide !
code édité avec l'ancien version V3 TinyMCE, onglet "avancé" de insérer une image
Mon calendrier de l'Avent, l'an passé, était fait de cette manière
Tags : animationCSS
-
Commentaires
Soir... C'est gentil (de passer et de me corriger mes fautes !!)
le tien de bog !!! (t'as déjà essayé de faire la faute de frappe dans l'adresse d'un eklablog..mettre eklabog et vu ce que ça donne !!! ? ) est beaucoup plusse beau et avancé. C'est pour cela que je t'ai piqué plein de trucs !!( avec le changement de logo eklablog, j'ai voulu changer le thème qui était bleu/vert mais je trouve que les couleurs du nouveau logo tirent trop vers "lie de vin" et "caca d'oie" et comme je veux conserver les contrastes inversés, pour mes yeux, c'est pas évident !)
Pour la barre outils dans l'éditeur comms, ouaip! j'avais constaté, ça marche pas à tous les coups.
ça vient certainement du code que j'ai ajouté pour supprimer l'icone "insérer des images".
D'ailleurs si t'as un peu de temps, c'est la code de là: http://bleulezard.eklablog.com/images-dans-les-commentaires-a113078698[[j'ai mis ce code sur un autre blog et là-bas, il fonctionne sans supprimer la barre outils !]]
Re bonjour, ^^
L'effet de l'image 1 est juste super!
C'est un mélange de c'est html ou juste de css ?
Salut! Est-ce que tu pourrai m'aider pour le code des image en effet fondu, s'il te plait? Merci
Salut,
Est-ce pour l'utiliser une seule fois ? Dans un article ?
Si c'est plutot ponctuel, tu ne mets pas le CSS dans "ajouter du CSS" mais seulement dans l'article concerné -- entre balise <style > et </style>--
En gros, il te faut deux images de mêmes dimensions donc
1-tu insères dans l'article les deux images aux mêmes dimensions
2- Tu passes coté code source avec le bouton <> de l'éditeur d'article.
3- tu vas voir le code html des deux images entre balises <img src ........../> donc deux fois <img src.................. />
4-
-Devant première balise <img ...... />, tu colles
<div id="cfondu">-Derrière fermeture dernière balise <img ....... />, tu colles
</div>
5- Dans la balise de l'image que tu veux en premier, tu ajoutes
class="top" entre <img et src ainsi
<img class="top" src="http://ekla............ />Tu dois te retrouver avec quelque chose comme cela (je mets en gras ce qui est ajouté):
<div id="cfondu"><img src="http://ekladata.com/bleulezard.eklablog.com/perso/1-allemagne%20-2-.jpg" alt="" /> <img class="top" src="http://ekladata.com/bleulezard.eklablog.com/perso/4minimalism%20-2-.jpg" alt="" /></div>
6- Reste à ajouter le CSS (à la suite du code html si pour un seul article) Règler width et height en fonction dimensions images.
<style><!--
#cfondu { /*espace qui contient les images*/
position:relative;
width:550px;/*largeur de l'image*/
height:550px; /*hauteur de l'image*/
margin:0 auto;
}#cfondu img {
position:absolute;
left:0
border-radius: 20px; /*arrondis des images*/
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}#cfondu img.top:hover {
opacity:0;
}Wouah c'est super classe comme rendu! Je vais essayer de faire un genre de menu avec je pense
En tous cas je te remercie pour ton aide!Bonjour Loïcia,
si c'est pour des boutons de menu, ya plus simple à faire.
Tu mets une image en fond de bouton ( background sur le sélecteur de l'élément du menu)
ainsi que la transition...et pour le même sélecteur :hover ( survol souris) tu mets une autre image de fond.
Sur un exemple, je pourrais un peu plus t'aiguiller
Tu as aussi cet article
http://bleulezard.eklablog.com/faire-pivoter-une-image-a61827461
avec des effets sur image au survol souris ( c'est toujours le même principe, on enregistre un effet CSS transition ou animation pour :hover comme ici pour le titre du blog..)A plus
Ajouter un commentaire
et non pas
perspective: 1000;
Waow...!!!! Il est tout beau ton bog !!!!
Edit:
Je n'ai pas la barre d'outils-icônes pour les commentaires....normal ?????