Powiększanie obrazka przy najechaniu

Question

Dzień dobry, chcę dodać na swoją stronę obrazek na którym jest tekst, a gdy się kursorem myszki najedzie się na ten obrazek to się powiększa. Zrobiłem to tak jak chciałem, tylko że jak się najedzie na zdjęcie wszystko jest ok, ale jak na tekst się najedzie to obrazek się zmniejsza do swojej pierwotnej wielkości. Nie mam dobrego pomysłu jak to zrobić żeby działało, niby mogę dodać w programie graficznym tekst na ten nieszczęsny obraz, ale gdybym ewentualnie chciał dodać jakąś animację na tekst, to nie miał bym takiej możliwości. 

Kod -> https://pastebin.com/8GK805D5

I ten mój obrazek tak wygląda

Proszę nie oceniać moich umiejętności pisania stron, dopiero się uczę.

Answer 1

Proponuję takie rozwiązanie

- usuń klasę .zak1 z  

<img src="mapz.png" class="zdj1">
<!-- <img src="https://picsum.photos/160/300?random=1" class="zdj1"> -->

btw, tag <img> nie ma tag-u "zamykającego" w postaci </img>

- taki zapis css (proponuję użyć: transform: scale(1.2))
  "wykrywasz" :hover nad "kontenerem" <div> o klasie zak1, we "wnętrzu",
   którego znajduje się m. in. obrazek (<img>)

     ...    

    .zak1{
      position: relative;
      width: 335px;
    }

    .zak1:hover img{
      transform: scale(1.2);
      /*transition-duration: 0.3s;
      width: 345;*/
    }

    ...

całość on-line.

Comments

Dzięki, dokładnie o to mi chodziło!

---

Dodanie dodatkowej innej akcji na innym elemencie 

    .zak1:hover img{
      transform: scale(1.2);
    }
    .zak1:hover .mini-tekst{
      color: lime;
      transform: rotate(180deg);
    }

    ...

    .mini-tekst{
      font-size: 1em;
      top: -245px;
      transition: all 2s;
    }

 

BTW, inne przykłady "zoomowania" w css-ie: on-line.

Answer 2

W kodzie masz taki hoover

    .zak1:hover{
        transition-duration: 0.3s;
        width: 345;
    }

Dodaj do width jakąś jednostkę (px na przykład)

Comments

Nie pomogło, problemem jest to że ten hover jest nadany na obrazek a tekst przykrywa w pewnym miejscu to zdjęcie.

---

Spróbuj ustawić obrazek jako tło diva i go skaluj?

---

Zrobiłem, tak tylko teraz tekst mi się nie chcę wyświetlać, nawet znalazłem na internecie coś takiego 

z-index: 2;

i nie daje to nic, problemem jest teraz też to że, nie działa do końca ta animacja, bo gdy najadę myszką na ten obrazek z hover to odkrywa się fragment następnego obrazka. Poza tym wyskalowanie tego obrazka graniczy z cudem. Bardziej bym stawiał że zrobiłem gdzieś błąd z divami, tylko nie wiem gdzie.

---

Pokażesz jaki kod masz teraz?