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>