[PHPBB3] Mettre un effet flou sur les images au passage de la souris se trouvant sur la même ligne

Bonjour à 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 :

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}" /> &nbsp;</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,

@Freedom Sun,
merci beaucoup pour cette astuce et pour le partage Stefano