Membres connectés récemment
[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne
2 participants
Page 1 sur 1
[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne
1Bonjour à toutes et tous,
Si cela vous dit : cette astuce est assez sympa !
Vous pouvez Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne.
Il y a une partie en template et une autre partie en CSS :
1 - Exemple en image pour les icônes "Nouveau et Répondre" vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.
Pour la partie Template : on va y coller ce code span :
Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :
Cherchez ceci : les icônes "Nouveau et Répondre"
Collez le code du span entre les deux div intérieurement :
Ce qui vous donnera :
------
2 - Exemple en image pour les petites icônes "Citer" "éditer" "supprimer", etc, vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.
Pareillement comme la partie 1 :
Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :
Cherchez ceci : les petites icônes "Citer" "éditer" "supprimer", etc,
Collez le code du span entre les deux ul intérieurement :
Ce qui vous donnera :
Maintenant passons au SCC :
Dans votre : Panneau d'administration / Affichage / Images et Couleurs / Feuille de style CSS
Collez ce code CSS :
Vous pouvez aussi mettre le flou dans divers endroits de vos icônes dans d'autres templates :
Suffit juste d'y rajouter le code span à chaque extrémité intérieure de vos codes icônes !!
Je précise que si vous mettez le code span à chaque extrémité extérieurement de vos codes icônes, le flou n'aura aucun n'effet !
En espérant que ceci vous plaira...
Si vous avez des questions, faites le savoir en créant une demande d'Entraide avec un titre assez explicite et si possible avec une capture d'image de votre besoin ! pour qu'une aide vous soit mieux adaptée !
https://www.milouze14.net/f14-entraide#A
Voir cette page pour être certain d'avoir validé votre template :
https://www.milouze14.net/h2-diverses-aides
À bientôt,
Si cela vous dit : cette astuce est assez sympa !
Vous pouvez Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne.
Il y a une partie en template et une autre partie en CSS :
1 - Exemple en image pour les icônes "Nouveau et Répondre" vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.
Pour la partie Template : on va y coller ce code span :
- Code:
<span id="Freedom"class="section-flou"> </span>
Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :
Cherchez ceci : les icônes "Nouveau et Répondre"
- Code:
<div class="buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /> </a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
<!-- END switch_user_authreply -->
</div>
Collez le code du span entre les deux div intérieurement :
- Code:
<span id="Freedom"class="section-flou"> </span>
Ce qui vous donnera :
- Code:
<div class="buttons"><span id="Freedom"class="section-flou">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /> </a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
<!-- END switch_user_authreply -->
</span></div>
------
2 - Exemple en image pour les petites icônes "Citer" "éditer" "supprimer", etc, vous pouvez apercevoir quand la souris passe sur l'un de ces icônes, ceci est flouté.
Pareillement comme la partie 1 :
Dans votre : Panneau d'administration / Affichage / Templates / Général : viewtopic_body :
Cherchez ceci : les petites icônes "Citer" "éditer" "supprimer", etc,
- Code:
<ul class="profile-icons">
<li>{postrow.displayed.THANK_IMG}</li>
<li>{postrow.displayed.MULTIQUOTE_IMG}</li>
<li>{postrow.displayed.QUOTE_IMG}</li>
<li>{postrow.displayed.EDIT_IMG}</li>
<li>{postrow.displayed.DELETE_IMG}</li>
<li>{postrow.displayed.IP_IMG}</li>
<li>{postrow.displayed.REPORT_IMG_NEW}</li></span>
</ul>
Collez le code du span entre les deux ul intérieurement :
- Code:
<span id="Freedom"class="section-flou"> </span>
Ce qui vous donnera :
- Code:
<ul class="profile-icons"><span id="Freedom"class="section-flou">
<li>{postrow.displayed.THANK_IMG}</li>
<li>{postrow.displayed.MULTIQUOTE_IMG}</li>
<li>{postrow.displayed.QUOTE_IMG}</li>
<li>{postrow.displayed.EDIT_IMG}</li>
<li>{postrow.displayed.DELETE_IMG}</li>
<li>{postrow.displayed.IP_IMG}</li>
<li>{postrow.displayed.REPORT_IMG_NEW}</li>
</span></ul>
Maintenant passons au SCC :
Dans votre : Panneau d'administration / Affichage / Images et Couleurs / Feuille de style CSS
Collez ce code CSS :
- Code:
/**Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne**/
/* DEBUT CSS FLOU SUR IMAGE */
span#Freedom.section-flou a, span#Freedom.section-flou{
}
span#Freedom.section-flou:hover a {
filter: blur(10px); /*Augmenter ou diminuer la valeur du flou en px des icones voisins au passage de la souri et mettre le même px dans le reste de cette section*/
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* Ajouter le même nombre, sans y mettre de px */
}
span#Freedom.section-flou:hover a:hover {
filter: blur(0px); /* Augmenter ou déminuer la valeur du flou en px de l'icone ou se trouve votre souris et mettre le même px dans le reste cette section */
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); /* Ajouter le même nombre, sans y mettre de px */
}
/* FIN CSS FLOU SUR IMAGE */
/**Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne**/
Vous pouvez aussi mettre le flou dans divers endroits de vos icônes dans d'autres templates :
Suffit juste d'y rajouter le code span à chaque extrémité intérieure de vos codes icônes !!
Je précise que si vous mettez le code span à chaque extrémité extérieurement de vos codes icônes, le flou n'aura aucun n'effet !
En espérant que ceci vous plaira...
Si vous avez des questions, faites le savoir en créant une demande d'Entraide avec un titre assez explicite et si possible avec une capture d'image de votre besoin ! pour qu'une aide vous soit mieux adaptée !
https://www.milouze14.net/f14-entraide#A
Voir cette page pour être certain d'avoir validé votre template :
https://www.milouze14.net/h2-diverses-aides
À bientôt,
Milouze14, Bri et fred9545 aiment ce message
Re: [PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne
2Sujets similaires
» [Phpbb3] Mettre un effet de tremblement sur les avatars ou image au passage de la souris
» [PHPBB3] Redimensionnement des images personnalisé
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
» [PHPBB2] Créer un effet de zoom sur une image au passage
» [PHPBB3] Supprimer la ligne Cacher sa présence en ligne
» [PHPBB3] Redimensionnement des images personnalisé
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
» [PHPBB2] Créer un effet de zoom sur une image au passage
» [PHPBB3] Supprimer la ligne Cacher sa présence en ligne
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum