Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 21

Discussione: Immagini in fila

  1. #1

    Immagini in fila

    Salve a tutti sono nuovo su questo forum, smanetto con l'html da pochissimo e mi servirebbe un aiutino.

    Quello che vorrei fare è una pagina con delle immagini, su cui quando ci si passa sopra il mouse appare un messaggio(https://www.w3schools.com/howto/howt...ge_overlay.asp). Ho fatto come dice su questo sito ma inserendo più immagini quest'ultime non sono in fila e il messaggio appare anche quando il mouse non è sull'immagine. C'è un modo per sistemarle in fila?

  2. #2
    codice:
    <html><head>
    <style>
    .container {
      position: relative;
      width: 50%;
    }
    
    
    .image {
      display: block;
      width: 17%;
      height: 17%;
      margin-left: 100px;
      margin-top: 100px;
    }
    
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100px;
      right: 0;
      height: 250px;
      width: 250px;
      opacity: 0;
      transition: .5s ease;
      background-color: #ffcc00;
    }
    
    
    .container:hover .overlay {
      opacity: 1;
    }
    
    
    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .container1 {
      position: relative;
      width: 200px;
      height: 200px;
    }
    
    
    .image1 {
      display: block;
      width: 17%;
      height: 17%;
      margin-right: 100px;
      margin-top: -100px;
    }
    
    
    .overlay1 {
      position: fixed;
      top: 190px;
      bottom: 0;
      right: 100px;
      height: 250px;
      width: 250px;
      opacity: 0;
      transition: .5s ease;
      background-color: #ffcc00;
    }
    
    
    .container1:hover .overlay1 {
      opacity: 1;
    }
    
    
    .text1 {
      color: white;
      font-size: 17px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    body{font-family: sans-serif; background-size: 60%; background-color: #FFEBCD; background-image:url('menu.jpg'); background-repeat: no-repeat; background-position: center;}
    
    
    nav{background: #ffcc00; height: 52px; width: 100%; position: fixed; top: 0; left: 0;}
    
    
    nav ul{list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1200px;}
    
    
    nav ul ul{display: none; position: absolute; top: 100%; left: 0; width: 100%;}
    
    
    nav ul li{position: relative; float: left; width: 33%; text-align: center; font-family: "Times new roman", sans-serif;}
    
    
    nav ul li:hover ul{display: block;}
    
    
    nav ul li li{position: relative; float: none; width: 100%; border: none;}
    
    
    nav ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 15px 25px; font-size: 1.2em; box-sizing: border-box; border-right: solid 2px #ffcc00; border-left: solid 2px #ffcc00;}
    
    
    nav ul ul li a{font-size: 1rem; border-bottom: solid 2px #ffcc00;}
    
    
    nav ul ul li:first-child a{border-top: solid 2px #ffcc00;}
    
    
    nav ul li:hover a{background: #FFF; color: #ffcc00; text-decoration: none; transition: 0.5s;}
    
    
    nav ul li li:hover a{background: #ffcc00; color: #FFF;}+
    </style>
    <title>Pizzeria | Il fornaio</title>
    </head>
    <body>
        <header>
                <nav>
                
                    <ul>
                        <li><a href="Homepage.html"><b>HOME</b></a></li>
                        <li><a href="Chisiamo.html"><b>CHI SIAMO</b></a></li>
                        <li><a href="Menu.html"><b>MENU</b></a>
    					<ul>
    					<li><a href="Menuc.html"><b>MENU PER CELIACI</b>   <img src="1600.png" width="30px" height="30px" class="image2"></a></li>
    					</ul>
    					</li>
                    </ul>
                
                </nav>
                
         
        
        </header>
    <div align="left" style="display:inline;" class="container">
      <img src="margherita-pizza.png" alt="Margherita" class="image">
      <div class="overlay">
        <div class="text"> <b><font color="red">MARGHERITA</font></b>
    	<b>PREZZO: 4€</b>
        Ingredienti: Mozzarella,
        Passata di pomodoro,
        Olio extra vergine d'oliva,
        Basilico.
    </div>
      </div>
    </div>
    <div align="right" style="display:inline;" class="container1">
      <img src="marinara.png" alt="Marinara" class="image1">
      <div class="overlay1">
        <div class="text1"> <b><font color="red">MARINARA</font></b>
    	<b>PREZZO: 5€</b>
        Ingredienti: Passata di pomodoro,
        Aglio,
        Acciughe,
        Basilico,
        Origano,
        Olio extravergine di oliva,
        <font color="green">Pepe verde facoltativo.</font>
    </div>
      </div>
    </div>
    
    
    </body>
    </html>

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    ciao Luca e benvenuto,

    partiamo dal codice di esempio originale.
    non mi dilungo in spiegazioni ma ti faccio subito un'esempio pratico di modifica:

    alla classe .container aggiungi float:left;
    per ogni immagine che intendi inserire rifatti all'esempio qui sotto:
    codice:
    css
    .container {
      position: relative;
      width: 50%; /* questo valore cambialo in base alle tue esigenze */
      float:left;
    }
    
    html
    <div class="container">
      <img src="img_uno.png" alt="AvatarUno" class="image">
      <div class="overlay">
        <div class="text">Hello World UNO</div>
      </div>
    </div>
    <div class="container">
      <img src="img_due.png" alt="AvatarDue" class="image">
      <div class="overlay">
        <div class="text">Hello World DUE</div>
      </div>
    </div>
    dovrebbe essere tutto chiaro...

  4. #4
    Ciao grazie mille per la risposta, ora i messaggi appaiono solo quando metto il mouse sull'immagine... Ma se sposto la foto il messaggio rimane dov'era primaImmagine.jpg

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    posta il codice completo, o meglio, una demo online.

  6. #6
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    posta il codice completo, o meglio, una demo online.
    codice:
    <html><head>
    <style>
    .container {
      position: relative;
      width: 50%; /* questo valore cambialo in base alle tue esigenze */
      float:left;
    }
    
    
    .image {
      display: block;
      width: 25%;
      height: 25%;
      margin-left: 200px;
      margin-top: 200px;
    }
    
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100px;
      right: 0;
      height: 250px;
      width: 250px;
      opacity: 0;
      transition: .5s ease;
      background-color: #ffcc00;
    }
    
    
    .container:hover .overlay {
      opacity: 1;
    }
    
    
    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    body{font-family: sans-serif; background-size: 60%; background-color: #FFEBCD; background-image:url('menu.jpg'); background-repeat: no-repeat; background-position: center;}
    
    
    nav{background: #ffcc00; height: 52px; width: 100%; position: fixed; top: 0; left: 0;}
    
    
    nav ul{list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1200px;}
    
    
    nav ul ul{display: none; position: absolute; top: 100%; left: 0; width: 100%;}
    
    
    nav ul li{position: relative; float: left; width: 33%; text-align: center; font-family: "Times new roman", sans-serif;}
    
    
    nav ul li:hover ul{display: block;}
    
    
    nav ul li li{position: relative; float: none; width: 100%; border: none;}
    
    
    nav ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 15px 25px; font-size: 1.2em; box-sizing: border-box; border-right: solid 2px #ffcc00; border-left: solid 2px #ffcc00;}
    
    
    nav ul ul li a{font-size: 1rem; border-bottom: solid 2px #ffcc00;}
    
    
    nav ul ul li:first-child a{border-top: solid 2px #ffcc00;}
    
    
    nav ul li:hover a{background: #FFF; color: #ffcc00; text-decoration: none; transition: 0.5s;}
    
    
    nav ul li li:hover a{background: #ffcc00; color: #FFF;}+
    </style>
    <title>Pizzeria | Il fornaio</title>
    </head>
    <body>
        <header>
                <nav>
                
                    <ul>
                        <li><a href="Homepage.html"><b>HOME</b></a></li>
                        <li><a href="Chisiamo.html"><b>CHI SIAMO</b></a></li>
                        <li><a href="Menu.html"><b>MENU</b></a>
    					<ul>
    					<li><a href="Menuc.html"><b>MENU PER CELIACI</b>   <img src="1600.png" width="30px" height="30px" class="image2"></a></li>
    					</ul>
    					</li>
                    </ul>
                
                </nav>
                
         
        
        </header>
    <div class="container">
      <img src="margherita-pizza.png" alt="AvatarUno" class="image">
      <div class="overlay">
        <div class="text"><b>MARGHERITA</b>
    	PREZZO: 4€</div>
      </div>
    </div>
    <div class="container">
      <img src="marinara.png" alt="AvatarDue" class="image">
      <div class="overlay">
        <div class="text">Hello World DUE</div>
      </div>
    </div>
    
    
    </body>
    </html>

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    Quote Originariamente inviata da Lucafarnese Visualizza il messaggio
    ...se sposto la foto il messaggio rimane dov'era prima...
    mica ho capito che vuoi dire...

  8. #8
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    mica ho capito che vuoi dire...
    Se sposto l'immagine, il messaggio che dovrebbe apparire passandoci sopra il mouse è da un'altra parte.

  9. #9
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    e come la sposti l'immagine? lo sposti con tutto il container? fai un'esempio
    e poi non volevi le immagini in linea?

  10. #10
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    e come la sposti l'immagine? lo sposti con tutto il container? fai un'esempio
    e poi non volevi le immagini in linea?
    Con il css ho scritto
    .image {
    width: 25%;
    height: 25%;
    margin-left: 200px;
    margin-top: 200px;
    }

    Per allontanarla dai bordi

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.