Immagini in fila

**Vincent.Zeno** · 14-11-2017, 22:37

posta il codice completo, o meglio, una demo online.

**Lucafarnese** · 14-11-2017, 22:48

Originariamente inviata da Vincent.Zeno

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>

Discussione: Immagini in fila

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio