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