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

question-closed Powiększenie obrazka bez tekstu.

VPS Starter Arubacloud
0 głosów
334 wizyt
pytanie zadane 12 kwietnia 2018 w HTML i CSS przez SZYMII Użytkownik (510 p.)
zamknięte 12 kwietnia 2018 przez SZYMII

Witam!

Chciałbym, aby po najechaniu na diva, zdjęcie powiększyło się (tylko zdjęcie). - i ten efekt udało mi się uzyskać lecz:

Problem jest w tym, że na tym obrazku znajduje się tekst ("position: absolute;") i gdy najeżdżam na niego kursorem zdjęcie wraca do pozycji początkowej.

Chcę, aby zdjęcie pozostało w pozycji powiększonej w czasie, gdy kursor znajduje się na obrazku lub tekście.

Oto część kodu, wraz z wizualizacją:

https://codepen.io/xSZYMIIx/pen/JLVgqg

komentarz zamknięcia: najlepsza
komentarz 12 kwietnia 2018 przez ScriptyChris Mędrzec (190,190 p.)

Przecież zdjęcie (bez tekstu) na Codepen powiększa się po najechaniu na niego myszką. Nie rozumiem więc o co chodzi. :)

Problem jest w tym, że na tym obrazku znajduje się tekst ("position: absolute;") i niestety psuje mi on cały efekt.

Jaki efekt psuje? 

komentarz 12 kwietnia 2018 przez SZYMII Użytkownik (510 p.)

Przepraszam już się poprawiam.

Efekt działa jak należy, lecz gdy kursor znajduje się w obrębie tekstu obrazek wraca do pozycji początkowej i w tym jest problem.

Chcę, aby zdjęcie pozostało w pozycji powiększonej w czasie, gdy kursor znajduje się na obrazku lub tekście.

2 odpowiedzi

+2 głosów
odpowiedź 12 kwietnia 2018 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 12 kwietnia 2018 przez SZYMII
 
Najlepsza

Zmień selektor z:

.scale:hover
{

na:

.obrazy:hover .scale
{

Wskażesz wtedy, że po najechaniu na rodzica obu elementów (zdjęcia i napisu) powiększy się tylko zdjęcie.

komentarz 12 kwietnia 2018 przez SZYMII Użytkownik (510 p.)

Bardzo dziękuje za pomoc :)

0 głosów
odpowiedź 12 kwietnia 2018 przez arces Pasjonat (17,700 p.)
To teraz jedno zasadnicze pytanie: co chcesz osiągnąć?

Piszesz coś o tekście, który "psuje cały efekt". Jak go psuje? Chcesz się pozbyć tekstu, czy o co chodzi? U mnie tylko zdjęcie się powiększa, tekst jest taki sam, więc kompletnie nie rozumiem pierwszej części Twojego posta.

Wytłumacz to wreszcie porządnie, bo jak mi się dobrze kojarzy był już podobny post i chyba nawet identyczny przykład...
komentarz 12 kwietnia 2018 przez SZYMII Użytkownik (510 p.)

Tak pytanie się już pojawiło lecz było ono wieloetapowe i było regularne edytowane.

Co do powyższego pytania.

Tak efekt działa, lecz zauważ, że zdjęcie wraca do pozycji początkowej po najechaniu kursora na tekst i w tym jest problem.

Post został wyżej zedytowany, więc możesz go jeszcze raz na spokojnie przeczytać.

 

 

komentarz 12 kwietnia 2018 przez arces Pasjonat (17,700 p.)
Już masz gotowe rozwiązanie od JSHolic

Podobne pytania

0 głosów
1 odpowiedź 650 wizyt
0 głosów
3 odpowiedzi 4,674 wizyt
0 głosów
1 odpowiedź 1,148 wizyt

92,832 zapytań

141,777 odpowiedzi

320,824 komentarzy

62,163 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

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!

...