Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, tortor eu eleifend lobortis, nulla purus pharetra sem, eu feugiat nulla tellus eget nisl. Praesent turpis diam, aliquam pellentesque molestie nec, commodo venenatis eros. Suspendisse potenti. Maecenas hendrerit ante a sapien luctus, ac aliquet nisl consectetur. Cras enim libero, ultrices a congue at, molestie in mi. Donec
Oeuf
vestibulum ultrices tempor. Phasellus pellentesque in mi ut laoreet. Pellentesque ac vehicula enim. Maecenas at consequat est, a aliquet leo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- Code:
-
<span class="conteneur_infobulle"><span class="mot_infobulle">Oeuf</span><span class="infobulle"><img src="URL_IMAGE" alt="couleur"</span></span>
- Code:
-
.conteneur_infobulle
{
position:relative;
overflow:visible;
}
.conteneur_infobulle .infobulle
{
position:absolute;
top:5px;
left:5px;
width:110px;
height:110px;
opacity:0;
visibility:hidden;
overflow:hidden;
transition:1s;
}
.conteneur_infobulle:hover .infobulle
{
opacity:1;
visibility:visible;
z-index:999;
transition:1s;
}
.mot_infobulle:hover
{
text-decoration:underline;
}