Salve,
Sto cercando di riprodurre qualcosa che avevo fatto e che ha funzionato (contrariamente alla mia memoria):
Zoom di un'immagine quando si passa il mouse su un testo. Nel mio lavoro attuale, l'immagine (il div piuttosto) non si anima (niente zoom).
codice HTML:
#textasiat{
padding: 0;
height: auto;
bottom: auto;
left: 0px;
margin-bottom: auto;
margin-left: 0px;
top: 0px;
position: relative;
margin-top: 500px;
font: 100px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
text-align: left;
text-decoration: none;}
a:hover {
color: gold;
text-decoration: none;}
.animClass {
backface-visibility: hidden;
margin-right: 0px;
right: 0px;
position: relative;
top: 0px;
left: auto;
bottom: auto;
float: right;
margin-top: 0px;
}
#imagasiat{
padding: 0;
height: auto;
bottom: auto;
left: 0px;
margin-bottom: auto;
margin-left: 0px;
top: 0px;
position: absolute;
width: 1000px;
height: 50px;;
margin-top: 20px;
background-color: yellow;
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.niveau1:hover + .niveau2 { -webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);}
codice HTML:
<div id="ancre_1" class="article">
<ul id="textasiat" class="niveau1" "textasiat" "animClass">
<li><a href="#">Ce lien sera</a></li>
<li><a href="#">Ce lien sera</a></li>
<li><a href="#">Ce lien sera</a></li>
<li><a href="#">Ce lien sera</a></li>
</ul>
</div>