Probleme de transparence

[valoudu75]

Bonjour a tous

alors voila avec ce code j'obtient ce resultat

Code:

<style type="text/css">.image { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; background: #cccccc; width: 200px; height: 200px; } .image:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; </style>
<table><tr><td><div style="background-image: url('http://38.media.tumblr.com/e70fa0e1b5b489a9ccba95c633726bdd/tumblr_inline_mgn4v3RFvL1r0kgjy.png'); width: 200px; height: 200px; position: relative;"><div class="image"><div style="width: 200px; padding: 8px; background-color: #cccccc; color: white;  line-height: 12px; height: 180px; overflow: auto; font-size: 12px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Georgia; line-height: 17px;">Nom et Prenom</div>
Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".
</div></div></div></td><td><div style="background-image: url('http://38.media.tumblr.com/e70fa0e1b5b489a9ccba95c633726bdd/tumblr_inline_mgn4v3RFvL1r0kgjy.png'); width: 200px; height: 200px; position: relative;"><div class="image"><div style="width: 200px; padding: 8px; background-color: #cccccc; color: white;  line-height: 12px; height: 180px; overflow: auto; font-size: 12px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Georgia; line-height: 17px;">Nom et Prenom</div>
Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".
</div></div></div></td></tr></table>

le background gris de l'image depasse et je voudrais que tout rentre dans l'ordre et que rien ne depasse.

voici en exemple ce que cela donne


merci par avance

[Lixyr]

Bonjour,

Quand on met un padding, il faut le prendre en compte pour la largeur d'un bloc...

<div class="image"><div style="width: 184px; padding: 8px; background-color: #cccccc; color: white; line-height: 12px; height: 180px; overflow: auto; font-size: 12px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Georgia; line-height: 17px;">Nom et Prenom</div>
Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide

Ce qui donne :

Code:


        <style type="text/css">.image { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; background: #cccccc; width: 200px; height: 200px; } .image:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; </style>
        <table><tr><td><div style="background-image: url('http://38.media.tumblr.com/e70fa0e1b5b489a9ccba95c633726bdd/tumblr_inline_mgn4v3RFvL1r0kgjy.png'); width: 200px; height: 200px; position: relative;"><div class="image"><div style="width: 184px; padding: 8px; background-color: #cccccc; color: white;  line-height: 12px; height: 180px; overflow: auto; font-size: 12px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Georgia; line-height: 17px;">Nom et Prenom</div>
        Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".
        </div></div></div></td><td><div style="background-image: url('http://38.media.tumblr.com/e70fa0e1b5b489a9ccba95c633726bdd/tumblr_inline_mgn4v3RFvL1r0kgjy.png'); width: 200px; height: 200px; position: relative;"><div class="image"><div style="width: 184px; padding: 8px; background-color: #cccccc; color: white;  line-height: 12px; height: 180px; overflow: auto; font-size: 12px; text-align: justify"><div style="font-size: 22px; text-align: center; font-family: Georgia; line-height: 17px;">Nom et Prenom</div>
        Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem".
        </div></div></div></td></tr></table>

[valoudu75]

ah je comprend c'est gentil pour l'aide merci beaucoup