CSS - potrzebne reguły

pytanie zadane 30 lipca 2021 w HTML i CSS przez w2 Obywatel (1,110 p.)

Cześć,

Mam problem ze znalezieniem odpowiedniej reguły CSS.

Chcę żeby po najeżdżaniu na zdjęcie- zdjęcie powiększyło się, ale nie wychodziło poza ramy oryginalnego formatu.

Potrzebuję reguł: klasa i klasa:hover

.article img {

}
.article img:hover {
    transform: scale(1.03);
    animation-play-state: running;
    transition: all 0.4s ease-in-out;
    opacity: 0.80;
}

Dzięki z góry!

3 odpowiedzi

odpowiedź 30 lipca 2021 przez radek024 Szeryf (77,160 p.)

Brakuje Ci właściwości overflow - pamiętaj, aby ją nadać w elemencie okalającym img.

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)

Zadziałało, ale nie bezbłędnie.

Na screenie widać jak po najechaniu, dolna cześć obrazka wychodzi poza ramę i nachodzi na text. Jakieś pomysły?

komentarz 31 lipca 2021 przez radek024 Szeryf (77,160 p.)

Jeżeli nie ustawiłeś overflow-y osobno, to coś jest nie tak w kodem. Najlepiej byłoby go zarzucić, natomiast wydaje mi się, że odległości ustaliłeś na podstawie paddingu elementu okalającego względem tekstu na dole - wówczas te miejsce również jest wykorzystane.

komentarz 31 lipca 2021 przez w2 Obywatel (1,110 p.)

Dzięki. Rozwiązanie znalezione i opisałem je niżej w postach.

odpowiedź 30 lipca 2021 przez VBService Ekspert (253,340 p.)

Jednym ze sposobów jest umiejscowienie obrazka w "kontenerze"

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)

Dzięki również za podpowiedź, ale rozwiązanie nie działa poprawnie w 100%. Potrzebne są dodatki maskujące niedoróbki.;)

komentarz 30 lipca 2021 przez VBService Ekspert (253,340 p.)

Potrzebne są dodatki maskujące niedoróbki.;)

zaciekawiłeś Mnie co masz na myśli, możesz podać więcej szczegółów, proszę.

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)

Patrz zdjęcie i komentarz niżej. Dodałem w klasie: .article- regułe: overflow:hidden;

I zdjęcie po najechaniu wychodzi "dołem" poza kadr.

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)

@.::VBService::.,

.article {
   overflow: hidden;
   height: 340px;
 
}
.article img:hover {
    transform: scale(1.03);
    animation-play-state: running;
    transition: all 0.4s ease-in-out;
    opacity: 0.80;
}

Zlokalizowałem problem. Dodana reguła: height- trzyma dolna krawędź obrazka, i powiekszony (przez najazd myszą) obrazek nie wychodzi poza pierwotne wymiary.
Problem który stworzyłem, dodając regule: height- psuje automatyczną/płynną siatkę dopasowania obrazków. Nie chcę dodawać tej reguły. Pracuję na systemie php (w środowisku Joomla!)

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)

Domyślnie co do wielkości obrazka, pracuje (jest właczona) reguła:

height: auto;

I chyba przez tę regułę- jest błąd wychodzenia powiększonego obrazka -poza kadr.

komentarz 30 lipca 2021 przez VBService Ekspert (253,340 p.)

Rozumiem, ze nie możesz umieścić tag <img> w tzw. "kontenerze" i height musi zostać auto.

Może podesłać kod html i css tylko tej karty, bo mam chyba rozwiązanie.

komentarz 30 lipca 2021 przez w2 Obywatel (1,110 p.)
edycja 30 lipca 2021 przez w2

height:auto musi zostać. Dlatego że wszystko działa na automatycznym dostosowaniu do rozdzielczości ekranu. Jak widać na jednym z obrazków (akurat przy tej rozdzielczości ma) height: 389,33px.

1.Wysyłam podgląd sytuacji. Reguły w css napisałem już wcześniej.
2. Zmieniłem transform: scale (1.13). Żeby przejaskrawić efekt nachodzenia na dolne napisy. I te nachodzenie jest tylko w jednym kierunku. Zdjęcie wychodzi poza ramę- w kierunku dolnym.
3.<img> jest już w kontenerze. Kontenerem jest <div class="sppb-addon-article">
W skróconej wersji <div class="article">

Cholewa- nie można wstawiać screenow w pełnej rozdzielczości? W tych, które zamieściłemm - nic nie widać. A wstawiłem duże screeny.

Nie ma sensu wysyłać plików na serwer- bo problem już rozwiązany.

odpowiedź 30 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 30 lipca 2021 przez VBService

Spróbuj zamiast <img> wstawić <div>

i obrazek z <img src="..." /> zapisać w <div style="background-image: url(...)">

to pozwoli Tobie na nadanie rozmiaru obrazka (właściwie tego div-a), bez ruszania czegokolwiek w .article

a efekt zoom otrzymasz za pomocą manipulacji w :hover tego div-a:

  background-size: ...;
  background-position: ...;

Pokaż 10 poprzednich komentarzy

komentarz 31 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 31 lipca 2021 przez VBService

Ok, to w takim razie, zawsze możesz zrobić kod (dodać do template-a) w javascript (custom.js), który po stronie przeglądarki na gotowym kodzie html "w locie" zrobi zoom na obrazku.

How to use Custom Code to set up Helix Ultimate Templates? (patrz punkt 4)

komentarz 31 lipca 2021 przez w2 Obywatel (1,110 p.)

Tak- tu już screeny/ i tematyka -wyglądaja znajomo. Ale jest problem. Nie znam JS.
Wiem że to podstawa itd etc itp, tyle że ja nie jestem programistą.
Jestem architektem- inżynierem, projektuję budynki, robię grafikę i wizualizacje i mam związaną z tą branża całą własną paletę narzędzi. A to że robię web-design- to takie boczne zainteresowania w bocznym temacie: projektowania parametrycznego/algorytmicznego etc. Kiedyś używałem Mathcada- i polubiłem ten kierunek projektowania "na parametrach/na zmiennych"

komentarz 31 lipca 2021 przez VBService Ekspert (253,340 p.)

No to jest jakieś wytłumaczenie, masz prawo do tego, reasumując, obecnie problem masz rozwiązany i nie potrzebujesz kodu w js-ie do tego. Pozdrawiam.

komentarz 31 lipca 2021 przez pablop76 VIP (123,180 p.)

@w2,

Korzystam z tych rozwiązań jak najbardziej. Po co instalować nowe moduły, komponenty jeżeli można zmodyfikować istniejące. Może ten artykuł wyjaśni Ci więcej. Nie szukałem zbyt dużo, może są lepsze materiały do wyjaśnienia tego zagadnienia.

W twoim przypadku możesz utworzyć układ alternatywny modułu i dodać w nim potrzebny kontener.

komentarz 31 lipca 2021 przez w2 Obywatel (1,110 p.)

Właśnie tak robię. Ale są pewne ograniczenia tych technik.

Dzięki bardzo;) Zapoznam się z tematyką w późniejszym czasie. Bo to pewnie będzie przydatne w przyszłości. Teraz, właśnie rozwiązuję takie dylematy- ale..
Ale brak wiedzy praktycznej przy tych złożonych funkcjach i tych możliwościach- skutkuje pojawiającymi się rozwiązaniami na które wcześniej bym nie wpadł a są oparte o dotychczas wykorzystywaną paletę narzędzi. Więc trzeba kreatywnie (jak McGyver) korzystać z tego co się ma pod ręką.