Ce tutoriel a été publié par final-blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Ben'zour !

Une petite astuce très sympa qui permet de faire apparaître un petit cadre (arrondi ou non) lors du survol d'un texte (ou d'une image) donné, ceci grâce au CSS.

Exemple pour ce tuto dans la description d'un forum, comme ici en passant sur les descriptions des sections :
Fyoutil Inn > Incliner le verbe fyoutiler
CulturActu > sur fond de Musique - etc...
Local du FIL > du Web, etc...
On peut l'appliquer dans un widget, post, message d'accueil, page HTML...

Commençons par le CSS (il s'agit de thumbnails dont l'astuce se trouve déjà dans la liste).
Dans la feuille de style CSS, copier-coller :

.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }

.thumbnail span{ /*les reglages de la zone masquee*/
color: #ffffff!important;
background-color: #000000;
border: 2px solid #ffffff;
left: -1000px;
visibility: hidden;
-moz-border-radius:20px; /*bords arrondis mozilla*/
-webkit-border-radius:20px; /*bords arrondis autres navs*/
padding:10px;
position: absolute;
}

.thumbnail:hover span{ /*pour faire apparaître la zone*/
visibility: visible;
top: 52px;
left: 34px; /*position d'ouverture horizontale */
width: 100%;
}

Dans le principe, ce code est pour une autre fonction, vous pouvez donc l'adapter à votre aise, ou le laisser ainsi et adapter spécialement pour les sections.


Maintenant, rendez-vous (au bar !) dans la section où vous souhaiter installer cette "popup" (thumbnail Prog Val) et là aussi, ce n'est qu'un exemple :

Code:

<div align="center" class="thumbnail">Description <span style="width: 40%; margin-left: auto; margin-right: auto;">Contenu de la popup</span></div>

Dans le div (s'il y en avez déjà un, il ne faut pas qu'il ait déjà un "class=" ) :

• align="center" > alignement de la description
  
• class ="thumbnail" > reprend l'intitulé du css
  
• span style="..." > va assigner tout ce que l'on veut que la popup contienne
  
• width: XX% > largeur de la popup
  
• tout ce qui concerne le texte et à mettre aussi SI les paramètres doivent différer de ceux déjà dans le CSS.
  (Les paramètres dans les balises HTML ont le dessus sur le CSS)

Vouaaalààà.

Hello !

Eh bien merci pour cette astuce !
Je vais l'ajouter à la liste, dans AJOUTS DE FONCTIONS