purtroppo la pagina non è online in quanto è una prova a scopo didattico ma posso copiare qui il codice visto che non è grandissimo
praticamente quando ingrandiscono gli elementi, si allunga anche il div, è possibile "fissare" il bottom del div alla parte bassa della pagina/finestra del browser o comunque fare in modo che rimanga di un altezza predefinita?codice:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Prova animazione</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <style> div#contenitore { width: 960px; background-color: black; margin: auto; } div#contenitoretabella { width: 920px; padding-left: 20px; padding-right: 20px; background-color: #777977; text-align: center; } table#pippotab1 { margin-top: 150px; display: inline-block; } table#pippotab2 { display: inline-block; margin-bottom: 200px } hr#pippohr { border: 0; border-bottom: 3px solid #999999; margin-bottom: 10px; margin-left: auto; margin-right: auto; width: 190px; } img.casella { height: 58px; width: 50px; padding: 2px; } img.casella:hover { height: 83px; width: 75px; animation-name: ingrandisci; animation-duration: 1s; } @keyframes ingrandisci { from { height: 58px; width: 50px } to { height: 83px; width: 75px } } </style> </head> <body> <div id="contenitore"> <div id="contenitoretabella"> <table id="pippotab1"> <tr> <td><img class="casella" src="image/pippo.png" alt="pippo"></td> <td><img class="casella" src="image/pippo1.png" alt="pippo1"></td> <td><img class="casella" src="image/pippo2.png" alt="pippo2"></td> </tr> </table> <hr id="pippohr"> <table id="pippotab2"> <tr> <td><img class="casella" src="image/pippo3.png" alt="pippo3"></td> <td><img class="casella" src="image/pippo4.png" alt="pippo4"></td> <td><img class="casella" src="image/pippo5.png" alt="pippo5"></td> </tr> </table> </div> </div> </body> </html>grazie mille già da ora
![]()

grazie mille già da ora
Rispondi quotando