Kevin Powell - Community•16mo ago

Zoom effect keeping dimensions.

Hi, Im trying to make a zoom effect on my img without breaking the card dimensions.. As you can see, https://github.com/leokim92/PreEntrega3-kim, in my index.html I have "galeria-container" class and with transition and hover I managed to create some kind of zoom, but with that zoom the image container is also growing.. I want to make a zoom effect inside the container.. Thanks for your time!

11 Replies

leokim92OP•16mo ago

Please, let me know if you need any more info..

Mannix•16mo ago

You want to wrap those images in a div and give that div overflow of hidden end result would be something like this

<div class="row">
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/budaejjigae.jpg" alt="budaejjigae">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/bulgogi.jpg" alt="bulgogi">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/grilledporkbelly.webp" alt="grilledporkbelly">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/jjimdak.jpg" alt="jjimdak">
                    </div>
                </div>

<div class="row">
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/budaejjigae.jpg" alt="budaejjigae">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/bulgogi.jpg" alt="bulgogi">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/grilledporkbelly.webp" alt="grilledporkbelly">
                    </div>
                    <div class="col-xl-3 col-md-6 col-sm-12 overflow-hidden px-0">
                        <img class="img-fluid imagenGaleria" src="img/jjimdak.jpg" alt="jjimdak">
                    </div>
                </div>

leokim92OP•16mo ago

Thank you! Ill try this when I get home it wroked. thank you so much worked** overflow-hidden px-0 and img-fluid are boostrap codes, right?

Mannix•16mo ago

yup

leokim92OP•16mo ago

the first row of img maintained the size of the container, but the others img broke, and some img are bigger than others.. ill push the code to gitbut and share with you.. guide me please if you have time.... "I applied the codes to all my img and that made another problem"....

Mannix•16mo ago

github still has the old code 🙂

leokim92OP•16mo ago

oka, I just pushed with the new codes.. https://github.com/leokim92/PF-Kim/settings/pages please, let me know if you need any more info

Mannix•16mo ago

change height: auto to height: 100% on the main .imagenGaleria you might also add object-fit: cover on it

leokim92OP•16mo ago

ill try, thanks Wow.. you are awesome Can you teach me ?

Mannix•16mo ago

teach you what? I learned most of this from Kevin's videos 🙂

leokim92OP•16mo ago

I should practice more Thank you again,

Gaming

Programming

Zoom effect keeping dimensions.