CSS care mărește imaginile la trecerea peste (Programare, Html, Css)

kittydragon a intrebat.
a intrebat.

Sunt destul de nou în ale codării, iar în prezent lucrez la un site cu pagini care conțin imagini. Vreau ca aceste imagini să fie afișate mici pe pagină, dar să se mărească la trecerea pe ele. Acest cod pe care îl folosesc funcționează, dar există o mică problemă pe care nu reușesc să o rezolv. Acesta este codul CSS pe care îl folosesc:

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image:hover img {
    width: 200%;
    height: 200%;
}

Problema pe care o am este că, dacă nu folosesc funcția float în CSS, imaginile vor fi mărite și dacă treceți pe deasupra la aceeași înălțime verticală ca și imaginile, spre deosebire de a trebui să treceți pe deasupra pe aceeași poziție orizontală, ceea ce este destul de enervant. Nu vreau să am float:left pentru că asta interferează cu restul paginii mele. Aș dori foarte mult ajutor în acest sens pentru că orice aș face, nu pare să rezolve problema. Mulțumesc anticipat pentru că mă veți ajuta.

Editare: Codul HTML:

<div id = "image">
    <img src = "image.png" alt = "image example">
</div>

Comentarii

  • puteți adăuga codul dvs. html –  > Por Chiller.
  • Este posibil să văd și codul tău html? În funcție de cum arată, s-ar putea să fie nevoie să schimbi selectorul CSS în #image img:hover. –  > Por Ariel.
  • Este #image un div care conține imagini? –  > Por Farzin Kanzi.
2 răspunsuri
edlee

În general. Nu folosiți etichete ID ca selector, folosiți în schimb class. Acestea vă vor prinde… citeste mai mult

Lasă-ți imaginea să se scaleze la div-ul care o înfășoară, apoi controlează div-ul de înfășurare. Și, nu ar trebui să aveți probleme.

.image-wrapper img {
  max-width: 100%;
}
.image-wrapper {
  width: 100%;
  -webkit-transition: width 1s, height 1s;
  transition: width 1s, height 1s;
}
.image-wrapper:hover {
  width: 200%;
  height: 200%;
}

kittydragon

Schimbarea codului de la

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image:hover img {
    width: 200%;
    height: 200%;
}

la

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image img:hover {
    width: 200%;
    height: 200%;
}

a rezolvat problema. Mulțumesc pentru ajutor (în special @Ariel)!

Tags:,