Skalowanie obrazka ale z zachowaniem oryginalnych rozmiarów

Question

Chcę osiągnąć taki efekt:

Po najechaniu na obrazek będzie miał większą skalę, ale będzie widoczne tylko to, co się mieści w oryginalnej wersji obrazka. A więc skaluje się, ale nie zwiększa rozmiaru.

Answer 1

Hm, a nadanie overflow: hidden elementowi, w którym obrazek się znajduje? To sprawi, że nic nie powinno poza niego wystawać.

Comments

Nie działa

---

To może pokaż jakiś kod?

---

tzn mam div > a > img

gdy wkleiłem diva działała tylko góra, ale w a nie działa

---

To dalej nic nie mówi.

---

& a
        {
            display: block;
            color: #333;
            text-decoration: none;
            overflow: hidden;
            &:hover
            {
                color: #000;
            }
            & .game-picture
            {
                aspect-ratio: 6/5;
                object-fit: cover;
                width: 25%;
                border-radius: 7px;
                &:hover
                {
                    scale: 120%;
                }
            }
        }

 

---

https://codepen.io/Comandeer/pen/MWxpzgG – na moje oko działa: obrazek się powiększa, ale nie wystaje poza link.

---

Ale wymiary obrazka są większe, a konkretnie szerokość

---

No to najłatwiej nadać rodzicowi obrazka jego wymiary + overflow: hidden i wówczas obrazek się będzie skalował tylko w ramach dostępnego miejsca.

---

Właśnie na to wpadłem, dzięki