Arranger un code de survol d'image
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Arranger un code de survol d'image
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
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>
Dernière édition par Kanzaki le Ven 17 Avr 2020 - 22:40, édité 1 fois
Re: Arranger un code de survol d'image
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 ! ^^
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>
MlleAlys- Membre actif
- Messages : 5901
Inscrit(e) le : 12/09/2012
Re: Arranger un code de survol d'image
Merci pour ces explications
Mon problème est résolu
Mon problème est résolu
Sujets similaires
» Arranger un code de template
» Problème avec la disposition dimage
» comment retiré le redimmensionnement dimage automatique
» Balise [code] [/code] : Avoir le texte « code » et « sélectionner le contenu » en bleu, plus gros ainsi qu’avoir la même couleur
» Bouton survol BUG
» Problème avec la disposition dimage
» comment retiré le redimmensionnement dimage automatique
» Balise [code] [/code] : Avoir le texte « code » et « sélectionner le contenu » en bleu, plus gros ainsi qu’avoir la même couleur
» Bouton survol BUG
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum