Comment afficher du texte en survolant une image avec sa souris

VictorP Le 25 juillet 2017 à 15:33 (Édité le 25 janvier 2019 à 17:53)

Bonjour à tous !
Je m'appelle Victor j'ai 16 ans et je suis un débutant en programmation :)
Je viens vous demander de l'aide car dans le petit site que je me suis fais j'ai mis une galerie d'images mais il n'y a pas de texte pour présenter les images alors je voulais savoir si il était possible d'ajouter du texte sur l'image en survolant avec la souris.
Par contre pour pouvoir lire le texte écrit en blanc il faudrait mettre un fond foncé derrière le texte et donc masquer l'image le temps qu'on garde la souris dessus
J'avais trouvé ce code qui permettait de foncer l'image quand on passais la souris dessus :

ul li a  {
    display:block;
    float:left;   
    width:135px;
    line-height:60px; /*hauteur de l'image de fond*/
    background-color: #800000 repeat-x;
    color:#DCDCDC;
    text-decoration:none;
    text-align:center;
    transition: all .6s linear;
}
 
ul li a:hover {
    background:#800000 repeat-x;
    color:white;
 }

Je ne sais pas si vous avez compris ma question mais en tout cas merci d'avance :D

TheOldNoob Le 26 juillet 2017 à 14:11

Salut l'ami,
Voici ce que tu cherche, c'est pas bien compliquer a faire.

https://codepen.io/HALgraphics/pen/rVQZrM

VictorP Le 26 juillet 2017 à 14:33

Merci beaucoup c'est exactement ce qu'il me fallait mais ça reste quand même bien complexe pour un débutant :D
Je vais essayer d'inclure tout ça dans mon code mais j'y comprends pas grand chose ;D

VictorP Le 26 juillet 2017 à 17:13

J'ai réussi à peu près à faire quelque chose de cohérent grâce à ces codes mais il y a juste un petit détail que je n'arrive pas à résoudre c'est que quand je dézoome ma page les images vont dans tout les sens et je sais qu'il faudrait que je fasse un site en responsive mais j'ai pas trop compris à l'histoire de calcul qu'il faudrait faire.
J'ai vu sur un site qui parlait de responsive qu'il fallait faire des divisions de pixels pour arriver à un résultat en pourcentage.
Je me suis peu être mal exprimé alors je vais mettre le lien que j'ai trouvé ;D
http://viseo.developpez.com/tutoriels/css/responsive-design/#LVI
Au début dans le .layout-content il y a la taille en pixels et après dans la deuxième étape il a fais un calcul pour avoir un résultat en pixel mais je comprends pas comment il sait quels chiffres prendre.😫
Merci d'avance :)

TheOldNoob Le 27 juillet 2017 à 08:03

Si tu veux faire du responsive, tu n'utilise JAMAIS de pixel.
N'oublie pas non plus de mettre :

img { width : 100%; }

dans ton reset css

VictorP Le 27 juillet 2017 à 13:39

Je sais bien qu'il ne faut pas utiliser les pixels pour faire du responsive mais quand je mets des pourcentages mes images ne sont pas alignées. Et est-ce que je dois mettre des pourcentages aussi pour la taille des images ou c'est juste pour la disposition ?

TheOldNoob Le 27 juillet 2017 à 14:04

alors, tes images ne font donc pas toute le même format, tu peu avoir des problème pour les allignés.
si elles font le meme format, c'est que tu a mal calculé le pourcentage.
A prendre en compte les margin et padding qui se gere avec le box-sizing.

Pour exemple, si tu veux mettre :
2 images cote a cote alors tes images devrons faire 50% de l'élement parent
3 images cote à cote 33% de l'élément parent
4 images 25%
5 images 20%
etc....

Prendre en compte l'écartement entre 2 images qui du coup vont te faire changer les valeurs que j'ai donné au dessus.
par exemple pour 4 images cote a cote avec un écartement entre chaque

100 % de la largeur diviser par 4 = 25%
mais a ses 25% il faut retirer l'écartement. Si tu met 1% d'écartement comme tu a 3 écartement, tu peu retiré 1% soit 4 x 24%.

Voilà, c'est a vu de nez. L'idéal pour faire du responsive facile c'est d'utilisé un framework comme bootstrap, Kncass ou materialize

VictorP Le 27 juillet 2017 à 14:27

Bah justement j'ai mis 4 images sur une ligne donc j'ai mis la taille de ces images à 25% donc quand l'affichage de la page est à 100 % il n'y a pas de soucis mais le problème c'est que quand je de zoom pour avoir taille d'écran de 1920×1200 (par exemple) mes images sont plus du tout alignées ????

TheOldNoob Le 27 juillet 2017 à 15:36

Tu a gérer les margin et padding ou les border ?

VictorP Le 28 juillet 2017 à 10:14

Non je n'ai paramétré aucuns des 3 vu que je souhaite que les 4 images prennent toute la place donc 100% de la page et donc de ne pas avoir des espaces sur les côtés

TheOldNoob Le 28 juillet 2017 à 12:25

montre code, html + css 😀

VictorP Le 28 juillet 2017 à 12:41 (Édité le 28 juillet 2017 à 15:10)

<!DOCTYPE html PUBLIC >
<html lang="fr">
<head>
      <meta name="description" content=""/>
      <meta name="keywords" content="" />
   <title>Wooden-Maker</title>
   <link rel="icon" href="Images/Logo.png" >
   <link rel="stylesheet" href="style.css"/>
   <body id="welcome_index" class="default footer-main">
   <link rel="stylesheet" type="text/css" />
 
         <!-- MENU -->
            <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-93338637-1', 'auto');
        ga('send', 'pageview');
            </script>
            <script language="javascript">
            
function displayDivInfo(text){
    if(text){
        //Détection du navigateur
        is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
         
        //Création d'une div provisoire
        var divInfo = document.createElement('div');
        divInfo.style.position = 'absolute';
        document.onmousemove = function(e){
            x = (!is_ie ? e.pageX-window.pageXOffset : event.x+document.body.scrollLeft);
            y = (!is_ie ? e.pageY-window.pageYOffset : event.y+document.body.scrollTop);
            divInfo.style.left = x+15+'px';
            divInfo.style.top = y+15+'px';
        }
        divInfo.id = 'divInfo';
        divInfo.innerHTML = text;
        document.body.appendChild(divInfo);
    }
    else{
        document.onmousemove = '';
        document.body.removeChild(document.getElementById('divInfo'));
    }
}
</script>
         <!-- HEADER BG -->
<div id="blocpage">
      <div id="main-content">
      <div class="pull-left full-width">
      <div id="header-bg" class="header-img as-window">
            <div class="item">
         
         <div class="Fondphotos">
            <div id="Créations">
               <img src="Images/Fondphotos.jpg" width="100%" height="1100" />
            </div>
         </div>
         
            </div>
         <div class="Logo">
            <img src="Images/Logo.png" />
         </div>
         
            </div>
         <div class="Titre">
            <img src="Images/Titre.png" />
         </div>
         
         <div class="Fondcontact">
            <img src="Images/Fondcontact.jpg" width="100%" height="600" />
         </div>
         
         <div class="Basdepage">
            <img src="Images/Basdepage.jpg" width="100%" height="100" />   
         </div>
         
   
      <!--ALBUM-->
<div class="Album" >
   <div class="buttons">
      <div class="Image1" >
         <div class="butFrame">
            <img src="Images/Oeuvre 3.png" >
               <div class="butText">
                  <p>Cette oeuvre a été réalisé avec du sipo pour le disque, du pin pour les éléments assemblés sur la face recto et verso, le support est en sipo peint avec de la peinture à bombe rouge ainsi qu'en or chromé. L'élément central est de la résine acrylique entouré de cyprès.</p>
               </div>
         </div>
       </div>
      <div class="Image2">
         <div class="butFrame" >
            <img src="Images/Oeuvre 2.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>
      
      <div class="Image3">
         <div class="butFrame">
            <img src="Images/Oeuvre 1.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>
      
      
      <div class="Image4">
         <div class="butFrame">
            <img src="Images/Logo youtube.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>
      
      <div class="Image5">
         <div class="butFrame">
            <img src="Images/Saladier.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>   
      
      <div class="Image6">
         <div class="butFrame">
            <img src="Images/Urne.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>   
      
      <div class="Image7">
         <div class="butFrame">
            <img src="Images/Collier.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>
      
      <div class="Image8">
         <div class="butFrame">
            <img src="Images/Couteau.png" >
               <div class="butText">
                  <p>..........</p>
               </div>
         </div>
      </div>
      
      <div class="Image9">
         <div class="butFrame">
            <img src="Images/Bouteille.png" >
               <div class="butText">
                  <p>Ce support à bouteille est en cyprès et il à été coupé à 45° pour que la bouteille puisse tenir en équilibre.</p>
               </div>
         </div>
      </div>
      
      <div class="Image10">
         <div class="butFrame">
            <img src="Images/Pot.png" >
               <div class="butText">
                  <p>Ce pot à crayon est constitué de 12 segments de sipo et de chêne qui sont coupés à 15° puis empilés les uns sur les autres.</p>
               </div>
         </div>
      </div>
      
      <div class="Image11">
         <div class="butFrame">
            <img src="Images/Rabot.png" >
               <div class="butText">
                  <p>Ce rabot est un assemblage de sipo et de movingui</p>
               </div>
         </div>
      </div>
      
      <div class="Image12">
         <div class="butFrame">
            <img src="Images/Sapin.png" >
               <div class="butText">
                  <p>Cette création est un sapin de noël constitué de nombreuses branches peintes en couleur or chromé.
                  <br>Elles sont assemblées par une tige filetée ce qui permet de pivoter chaques branches.</br>
                  </p>
               </div>
         </div>
      </div>
   </div>
</div>
      
      
      <!--//ALBUM-->
         
         
         <!--FORMULAIRE-->   
      <p style="text-align:center;" class="Creationstitre">
         <span class="color_11">
            Créations
         </span>
      </p>
         <div class="Barre1">
         </div>
         
         
      <p style="text-align:center;" class="Presentationtitre">
         
         <span class="color_11">
             Présentation
         </span>   
      </p>
      
      <div class="Barre2">
         <div id="Présentation">
         </div>
      </div>
         
            <p style="text-align:center;" class="Paragraphe">
         <span class="color_11">
            Bonjour ! Je me présente : Victor Peuziat j'ai 16 ans et je suis depuis de nombreuses années autodidacte dans le domaine du travail du bois de manière générale et en particulier du tournage sur bois depuis mes 14 ans.
            <br>
            <br>Pour me contacter veuillez envoyer un mail à cette adresse :<b> vic.peuziat@gmail.com</b> </br>
         </span>   
      </p>
         
   <form method="post" >
      <div class="Formulaire">
      </div>
      
         <fieldset id="coordonnees">
         <div class="Contacter">
         </div>
         
            <p style="text-align:center;" class="Creepar">
               <span class="color_11">© 2017 Victor Peuziat<br>
                     <a href="http://wooden-maker.esy.es/Mentionlegales.html">Mentions légales
                  </font>
               </span>
            </p>
            
      
         </fieldset>
   </form>
         
            <!--//FORMULAIRE-->
   
   <nav class="navbar navbar-fixed-top">
        <div class="navbar-container">
            <div class="navbar-inner">
                    
         <!-- //HEADER BG -->
            <!-- MENU -->
                
    <nav class="navbar navbar-fixed-top">
        <div class="navbar-container">
            <div class="navbar-inner">
                <div class="nav-collapse collapse">
                       <ul class="nav nav-list">
         <li class="nav-item-1">
         <a class="Accueil" href="http://wooden-maker.esy.es/" > ACCUEIL</a> 
            </li>
            <li class="nav-item-2">
         <a class="Creations" href="#Créations" >CREATIONS</a>
            </li>
         <li class="nav-item-3">
         <a class="Presentation" href="#Présentation" >PRESENTATION</a>
            </li>
                     
                  </ul>
                </div>
            </div>
        </div>
    </nav>
         </div>   
      </div>   
</div>      
      <!-- //MENU -->
</head>         
<body>
      <body background="Images/Background.jpg"/>
</body>
</html>

html {
    background: #ddd;
}
img {
   width: 100% ;
    max-width: 100%;
   min-width: 100px;   
   min-height: 100px;
}
body {
    max-width: 1900px;
   min-width: 320px;
    width: 100%;
    margin:0;
}
html, body {
  max-width: 100%;
  background-attachment: fixed;
  height: 2600px;
  margin: 0 auto;
}
body {font-family: 'Century Gothic'; max-width: 1400px; } 
.buttons {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;}
/* PASTE BELOW IN CSS */
.buttons * {
  transition: all .6s ease;
  
}
.buttons {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
}
.butFrame {
  width: 100%;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  overflow: hidden;
  font-size: 1em;
}
.butFrame img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}
.butFrame .butHeading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 0;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 1.2em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
.butFrame .butText {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.butFrame .butText p {
  width: 80%;
  padding: 0px 0;
  color: #fff;
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.6em;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
/* HOVER STYLES */
.butFrame:hover .butHeading {
  bottom: -52px;
}
.butFrame:hover .butText {
  opacity: 1;
}
.butFrame:hover .butText p {
  padding: 25px 0;
}
/* MEDIA QUERIES */
@media all and (max-width: 950px) and (min-width: 701px){
  .butFrame .butText p {
  font-size: 0.85em;
  }
  
}
@media all and (max-width: 700px) and (min-width: 0px){
  
  .butFrame {
    display:block;
    width:100%;
  }
  
}
#blocpage {
     width: 100%;
    height: 100%;
  }
*{
   margin: 0;
   font-family: "Century Gothic", Sans Serif ;
}
.Logo{
   position: absolute;
   top: 160px;
   left: 39% ;
   right: 0px ;
   width: 20% ;
   height: 20% ; 
}
.Titre{
   position: absolute;
   top: 290px;
   left: 32%;
   right: 0px ; 
   width: 34% ;
}
.Fondphotos{
   position: absolute;
   top: 720px;
   width: 100% ;
   max-width: 1400px;
}
.Fondcontact{
   position: absolute;
   top: 1900px;
   left: 0px;
   right: 0px;
   width: ;
   height: ;
}
.Basdepage{
   position: absolute;
   top: 2540px;
   left:0px;
   right: 0px;
   width: ;
   height: ;
}
   /* Album */
.Image1{
   position: absolute;
   top: 900px;
   width: 25%;
   height: 25%; 
}
.Image2{
   position: absolute;
   top: 900px;
   left:25% ;
   width: 25%;
   height: 25%;
}
.Image3{
   position: absolute;
   top: 900px;
   left: 50% ;
   width: 25%;
   height: 25%;
}
.Image4{
   position: absolute;
   top: 900px;
   left: 75% ;
   width: 25%;
   height: 25%;
}
.Image5{
   position: absolute;
   top: 1170px;
   left:0%;
   width: 25%;
}
.Image6{
   position: absolute;
   top: 1170px;
   left:25% ;
   width: 25%;
}
.Image7{
   position: absolute;
   top: 1170px;
   left: 50% ;
   width: 25%;
}
.Image8{
   position: absolute;
   top: 1170px;
   left:75% ;
   width: 25%;
}
.Image9{
   position: absolute;
   top: 1440px;
   left:0% ;
   width: 25%;
}
.Image10{
   position: absolute;
   top: 1440px;
   left:25% ;
   width: 25%;
}
.Image11{
   position: absolute;
   top: 1440px;
   left:50% ;
   width: 25%;
}
.Image12{
   position: absolute;
   top: 1440px;
   left:75% ;
   width: 25%;
}
.Creationstitre{
   font-size: 2em ;
   position: absolute;
   top: 760px ;
   left:42%;
   right: 58%;
   width: 200;
   min-width: 100px;
   min-height: 50px;
}
.Presentationtitre{
   font-size: 2em ;
   position: absolute;
   top: 1950px ;
   left:42%;
   right: 60%;
   width: 200;
}
.Paragraphe{
   font-size: 1.35em ;
   position: absolute;
   top: 2050px ;
   left:30%;
   right: ;
   width: 500;
   color: 3f3f3f ;
   text-align: center;
}
.Creepar{
   font-size: 1em;
   position: absolute;
   top: 585px;
   left: px ;
   right: px;
   color: white;
   width: 300;
}
.Barre1{
   position: absolute;
   top: 820px;
   left: 48% ;
   right: ;
   color: black;
   width: 50;
   border: 1px solid black;   
}
.Barre2{
   position: absolute;
   top: 2005px;
   left: 48%;
   right: px;
   color: black;
   width: 50;
   border: 1px solid black;
}
form/*Formulaire*/{
   position: absolute;
   top: 1980px;
   height: 450px;
   right: 0px;
   left: 505px;
   width: 0px ;
   text-align: center;
   font-size: 20;
}
input, textarea{
   height: 40px;
   border : 2px solid grey;
   font-size: 15;
}
   
fieldset {
   margin: 0; padding: 0; border: 0; 
}
ul {
   padding:0;
   margin:0;
   list-style-type:none;
   font-size: 20px;
}
ul li a  {
   display:block;
   float:left;   
   width:160px;
   line-height:25px; /*hauteur de l'image de fond*/
   background-color: #800000 repeat-x;
   color:#ffffff;
   text-decoration:none;
   text-align:center;
   transition: all .6s linear;
   position: center;
   right: 60px;
    
}
.Accueil ,.Creations{
    border-right:1px solid ;
   top: 20px ;
   height: 25px;
   position: relative;
}
.Presentation{
   top: 20px ;
   height: 25px;
   position: relative;
}
   
ul li a:hover {
    background: repeat-x;
    color:white;
    
 }  
a img{
   float: ;
   width: 50px;
   text-align: center;
}
element.style {
}
   .navbar {
   background-color: transparent;
   z-index: 1000;
}
   .navbar-fixed-top {
   top: 0;
}
   .navbar-fixed-top, .navbar-fixed-bottom {
   position: fixed;
   right: 0;
   left: 430px;
   z-index: 1030;
   margin-bottom: 0;
}

Il doit surement il y avoir beaucoup d'erreurs mais je suis débutant alors ;D

TheOldNoob Le 29 juillet 2017 à 12:24

Alors,
Pas mal de truc qui ne vont pas.
Déjà tu crée des classe Image de 1 a 12.
On met jamais de majuscule sur une class
Ensuite, tu met des valeurs commune. Prend une classs, colle la a toute tes images qui ont besoin de ses valeur, puis crée des ID pour les valeurs unique.

Hormis ça si tu veux que ton site prenne la totalité de la page, il faut faire un reset CSS. Car chaque navigateur a sa propre feuille de style.
Par exemple, chrome a une marge de 8px sur le body...

VictorP Le 29 juillet 2017 à 12:39

Ok merci je vais arranger ça pour les class ;D
Par contre le reset css c'est quoi ?

TheOldNoob Le 29 juillet 2017 à 12:40

Comme son nom l'indique, c'est un reset 😀

https://www.alsacreations.com/astuce/lire/36-reset-css.html

Échange

Articles / Vidéos

Ressources