Arranger un code de survol d'image

[Kanzaki]

Bonsoir,

J'ai un problème avec mon code de survol d'image, je n'arrive pas à mettre les images les unes à côté des autres, comment faire pour arranger ça ?
https://i.servimg.com/u/f68/12/68/02/44/captur10.png

Code:


<div style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png); width:150px; height:150px;"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/>  <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div> <style> .Cache_Texte{transition-duration:.8s; opacity:0; width:150px; height:150px;text-align:center;background-color:#000000;} .Cache_Texte:hover{color:#394557;opacity : 0.9;}
</style><div style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png); width:150px; height:150px;"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/> <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div> <style> .Cache_Texte{transition-duration:.8s; opacity:0; width:150px; height:150px;text-align:center;background-color:#000000;} .Cache_Texte:hover{color:#394557;opacity : 0.9;}
</style> <div style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png); width:150px; height:150px;"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/>  <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div> <style> .Cache_Texte{transition-duration:.8s; opacity:0; width:150px; height:150px;text-align:center;background-color:#000000;} .Cache_Texte:hover{color:#394557;opacity : 0.9;}
</style>

[MlleAlys]

Bonjour,

Une balise <div> est par défaut un bloc qui présente automatiquement un retour à la ligne avant et après. On va l'afficher en "inline-bloc" pour pouvoir les afficher côte à côte.
Comme la mise en forme sera la même pour tous les blocs, je leur attribue la class cache_fond et je mets leur mise en forme une seule fois dans le css.
Enfin, la balise <style> contenant ce css n'a pas besoin d'être répété, il peut être mis une seule fois sur toute la page et sera actif pour toute celle-ci ! ^^

Code:

<div class="cache_fond" style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png);"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/>  <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div><div class="cache_fond" style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png);"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/> <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div><div class="cache_fond" style="background-image:url(https://images2.imgbox.com/7e/1c/NHEtwovT_o.png);"> <div class="Cache_Texte" style="background-color:#E7E8E7"><br/>  <br /> [size=16][b]Pseudo [/b][/size]<br />[size=14][i]Disparu depuis 2008[/i][/size]  <br /> Recherché par X personne
</div></div>

<style>.cache_fond{width:150px; height:150px;display:inline-block;} .Cache_Texte{transition-duration:.8s; opacity:0; width:150px; height:150px;text-align:center;background-color:#000000;} .Cache_Texte:hover{color:#394557;opacity : 0.9;}
</style>

[Kanzaki]

Merci pour ces explications

Mon problème est résolu