• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Powiększanie obrazka przy najechaniu

VPS Starter Arubacloud
0 głosów
219 wizyt
pytanie zadane 7 stycznia 2023 w HTML i CSS przez Cypika Początkujący (290 p.)
zamknięte 7 stycznia 2023 przez Cypika

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ę.

komentarz zamknięcia: Otrzymałem rozwiązanie

2 odpowiedzi

+1 głos
odpowiedź 7 stycznia 2023 przez VBService Ekspert (250,450 p.)
wybrane 7 stycznia 2023 przez Cypika
 
Najlepsza

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.

1
komentarz 7 stycznia 2023 przez Cypika Początkujący (290 p.)
Dzięki, dokładnie o to mi chodziło!
komentarz 7 stycznia 2023 przez VBService Ekspert (250,450 p.)
edycja 7 stycznia 2023 przez VBService

Dodanie dodatkowej innej akcji na innym elemencie wink

    .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.

0 głosów
odpowiedź 7 stycznia 2023 przez wizarddos Nałogowiec (25,130 p.)

W kodzie masz taki hoover

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

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

komentarz 7 stycznia 2023 przez Cypika Początkujący (290 p.)
Nie pomogło, problemem jest to że ten hover jest nadany na obrazek a tekst przykrywa w pewnym miejscu to zdjęcie.
komentarz 7 stycznia 2023 przez wizarddos Nałogowiec (25,130 p.)
Spróbuj ustawić obrazek jako tło diva i go skaluj?
komentarz 7 stycznia 2023 przez Cypika Początkujący (290 p.)

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.

komentarz 7 stycznia 2023 przez wizarddos Nałogowiec (25,130 p.)
Pokażesz jaki kod masz teraz?

Podobne pytania

0 głosów
0 odpowiedzi 329 wizyt
pytanie zadane 27 lutego 2020 w JavaScript przez gugol9 Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 420 wizyt
0 głosów
1 odpowiedź 224 wizyt
pytanie zadane 13 maja 2019 w HTML i CSS przez Kacperhehe Bywalec (2,930 p.)

92,416 zapytań

141,222 odpowiedzi

318,985 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...