[risolto] hover su link

kippo

ciao
ho il seguente link sul sito:

html
<div class="eventi">
<a href="https:etc ..." target="_blank">
<img alt="Medico della Peste Live" src="<?php echo $lmdp; ?>"><br>Medico della Peste Live
</a>
</div>

css
.eventi {
margin-left: -120px;
margin-bottom: 20px;
margin-top: 100px;
font-family: "Gothic Ultra Ot";
font-size: 30px;
font-weight: bold;
}
.eventi img {display:inherit;}
.eventi a {color: #25aaff;}
.eventi a:hover {font-size:35px;}
.eventi img:hover {width:164px;height:210px;}

il problema e' l'hover perche' io con l'hover vorrei ingrandire sia l'img che la label sotto
ok con il mouse sull'img funziona ma con il mouse sulla label ingrandisce solo la label e non l'img
e' possibile ingrandire anche l'img con il mouse sulla label ?
grazie

jabba

Perchè li gestisci come due elementi separati quindi gli hover sono due effetti distinti. Devi fare l'hover su un genitore comune. Prova a cambiare l'html in questo modo:

<div class="eventi">
  <div class="evento-item">
    <img src="..." alt="...">
    <a href="...">Medico della peste ecc ecc</a>
  </div>
</div>

e di conseguenza l'hover lo fai sul genitore di entrambi (ossia .event-item):

.eventi {
  margin-left: -120px;
  margin-bottom: 20px;
  margin-top: 100px;
  font-family: "Gothic Ultra Ot";
  font-size: 30px;
  font-weight: bold;
}

.eventi img {
  display: inherit;
}

.eventi a {
  color: #25aaff;
}

.evento-item:hover img {
  width: 164px;
  height: 210px;
}

.evento-item:hover a {
  font-size: 35px;
}

Volendo puoi anche aggiungere una transition sui due elementi se vuoi rendere il tutto più fluido:

.eventi img {
  display: inherit;
  transition: all 1s ease;
}

.eventi a {
  color: #25aaff;
  transition: all 1s ease;
}

Ciao

kippo

ok ora va bene
avevo gia' pensato al div genitore ma non avevo proseguito perche' ad una prima prova mi metteva l'area cliccabile su tutto il div
cosi' funziona bene solo 2 piccoli appunti:

bisogna mettere {width: fit-content;} nel sottodiv per l'area cliccabile
la transition funziona solo sulla label non sull'img

grazie jabba (prezioso come sempre)
alla prox

kippo

per la transition sull'img sembra che bisogna usare transform:

    .image-container img {
        width: 300px;
        transition: transform 0.5s;
    }
    .image-container img:hover {
        transform: scale(1.2) rotate(10deg);
    }

ma non lo metto perche' va bene cosi'
ciao