Random content hover image

[Admin]

BBCode à utiliser pour afficher une image et une autre image au survol de la souris.

Utilisation du BBCode

Code : Tout sélectionner

[himg]{URL1} , {URL2}[/himg]

Code HTML de remplacement

Code : Tout sélectionner

<a href="{URL1}" 
onMouseOver="if (document.images)document.imagename1.src='{URL1}';"
onMouseOut="if (document.images)document.imagename1.src='{URL2}';">
<IMG SRC="{URL2}" name=imagename1 style="max-width:100%"></a>

[Admin]

BBCode à utiliser pour afficher une image et une information texte au survol de la souris.

Utilisation du BBCode

Code : Tout sélectionner

[imginfo={TEXT}]{URL}[/imginfo]

HTML de remplacement

Code : Tout sélectionner

<div style="position:relative; display:inline-block; margin:5px; vertical-align:top; overflow:hidden; border-radius:8px; line-height:0;" 
     onmouseover="this.querySelector('div').style.opacity='1'; this.querySelector('div').style.transform='translateY(0)';" 
     onmouseout="this.querySelector('div').style.opacity='0'; this.querySelector('div').style.transform='translateY(10px)';" >

    <img src="{URL}" style="width:200px; display:block; transition:0.3s;" />

    <div style="position:absolute; bottom:0; left:0; right:0; 
                background:rgba(0,0,0,0.75); color:#fff; 
                font-family:sans-serif; font-size:13px; line-height:1.4;
                padding:10px; opacity:0; transform:translateY(10px); 
                transition:all 0.3s ease-in-out; pointer-events:none;">
        {TEXT}
    </div>
</div>

Random content hover image