Implementing CSS to effectively scale images within a fixed box size

Question

Implementing CSS to effectively scale images within a fixed box size

I am attempting to create a collection of images with rounded borders that will expand on hover, while staying within a specified box size. I want the effect to give the illusion that the image is only zooming inside the box and not physically enlarging on the webpage. Despite trying various methods, I have been unsuccessful in achieving this desired outcome. Any guidance or advice would be greatly appreciated.

https://i.sstatic.net/xnOIN.jpg

     .foto{
       overflow: hidden;
       max-width: 100%;
       border-radius: 25px;
    
    }
    .popis{
       position: absolute;
       bottom: 5px;
       left: 50px;   
    }
    .popis h3{
      font-weight: 600;
      color: white;
    }
    main img{
       filter: brightness(60%);
       width: 100%;
       overflow: hidden;
       border-radius: 25px;
       -webkit-transform: scale(0.9);
       -ms-transform: scale(0.9);
       transform: scale(0.9);
       transition: transform 0.5s, opacity 0.5s;
    }
    main img:hover{
       opacity: 1;
       -webkit-transform: scale(1);
       -ms-transform: scale(1);
       transform: scale(1);
       transition: transform 0.5s, opacity 0.5s;
    }

    <main role="main" class="container">

        <div class="row" id="nprace">
            <div class="col-lg-12 col-md-12 text-center nadpis">
                <h2>Lorem ipsum</h2>
            </div>
            <div class="row">
                <div class="foto col-lg-4 col-md-4">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="foto col-lg-4 col-md-4">

                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="foto col-lg-4 col-md-4">

                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="foto col-lg-4 col-md-4">
                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="foto col-lg-8 col-md-8">
                    <h3>Text</h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nibh. Aenean vel massa quis mauris vehicula lacinia. Nulla quis diam. Etiam quis </p>
                </div>
                <div class="foto col-lg-4 col-md-4">
                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="foto col-lg-4 col-md-4">
                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>

                </div>
                <div class="foto col-lg-4 col-md-4">
                    <img src="img/hagendaz.jpg">
                    <div class="popis">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
            </div>
        </div>

    </main>

html css

Answer 1

Answer №1

Alright, let's give this a shot

To center your image when zooming in, simply adjust the margins on hover to remove any difference. This will create a centered effect.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        img{
            height: 300px;
            width:300px;
            transition: 0.5s; /*Include transition for smooth zoom effect */
            cursor: pointer; 
            border-radius: 25px;
        }
        img:hover{ 
            margin-left: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px) */
            margin-right: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/ 
            margin-top: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/
            margin-bottom: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/
            height: 320px; /*Resize image on hover*/
            width:320px; /*Resize image on hover*/
        }
        #imgWrapper{
            height: 300px;
            width:300px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden; /*Ensure wrapper content does not overflow */
            text-align: center;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div id="imgWrapper">
        <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
    </div>
</body>
</html>

Answer 2

Alright, let's give this a shot

To center your image when zooming in, simply adjust the margins on hover to remove any difference. This will create a centered effect.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        img{
            height: 300px;
            width:300px;
            transition: 0.5s; /*Include transition for smooth zoom effect */
            cursor: pointer; 
            border-radius: 25px;
        }
        img:hover{ 
            margin-left: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px) */
            margin-right: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/ 
            margin-top: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/
            margin-bottom: -20px; /*Adjust margins to keep it centered while zooming (e.g., -20px)*/
            height: 320px; /*Resize image on hover*/
            width:320px; /*Resize image on hover*/
        }
        #imgWrapper{
            height: 300px;
            width:300px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden; /*Ensure wrapper content does not overflow */
            text-align: center;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div id="imgWrapper">
        <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png">
    </div>
</body>
</html>

Answer 3

Answer №2

Almost there, make sure to check the feedback.

.image{
       overflow: hidden;
       max-width: 60%; /* Adjusted for better visibility */
       border-radius: 25px;
       width: 20rem;
       padding: 1rem
    }
    .description{
       position: absolute;
       bottom: 5px;
       left: 50px;   
    }
    .description h3{
      font-weight: 600;
      color: white;
    }
    main img{
       filter: brightness(60%);
       width: 100%;
       overflow: hidden;
       border-radius: 25px;
       transform: scale(1.1); /* Resetting back */
       transition: transform 0.5s, opacity 0.5s;
    }
    main img:hover{
       opacity: 1;
       transform: scale(1.2, 1.2); /* Increase both X and Y transforms by 40% */
       transform-origin: center center; /* Transform origin at center */
       transition: transform 0.5s, opacity 0.5s;
    }

<main role="main" class="container">

        <div class="row" id="work">
            <div class="col-lg-12 col-md-12 text-center title">
                <h2>Lorem ipsum</h2>
            </div>
            <div class="row">
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">

                </div>
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">

                </div>
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">
                    <div class="description">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="image">
                    <img src="https://i.sstatic.net/XZ4V5.jpg">
                    <div class="description">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="image">
                    <h3>Text</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor turpis ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nibh. Aenean vel massa quis mauris vehicula lacinia. Nulla quis diam. Etiam quis </p>
                </div>
            </div>
        </div>
    </main>

Answer 4

Almost there, make sure to check the feedback.

.image{
       overflow: hidden;
       max-width: 60%; /* Adjusted for better visibility */
       border-radius: 25px;
       width: 20rem;
       padding: 1rem
    }
    .description{
       position: absolute;
       bottom: 5px;
       left: 50px;   
    }
    .description h3{
      font-weight: 600;
      color: white;
    }
    main img{
       filter: brightness(60%);
       width: 100%;
       overflow: hidden;
       border-radius: 25px;
       transform: scale(1.1); /* Resetting back */
       transition: transform 0.5s, opacity 0.5s;
    }
    main img:hover{
       opacity: 1;
       transform: scale(1.2, 1.2); /* Increase both X and Y transforms by 40% */
       transform-origin: center center; /* Transform origin at center */
       transition: transform 0.5s, opacity 0.5s;
    }

<main role="main" class="container">

        <div class="row" id="work">
            <div class="col-lg-12 col-md-12 text-center title">
                <h2>Lorem ipsum</h2>
            </div>
            <div class="row">
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">

                </div>
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">

                </div>
                <div class="image">

                    <img src="https://i.sstatic.net/XZ4V5.jpg">
                    <div class="description">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="image">
                    <img src="https://i.sstatic.net/XZ4V5.jpg">
                    <div class="description">
                        <h3>Hagendaz</h3>
                    </div>
                </div>
                <div class="image">
                    <h3>Text</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor turpis ac leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nibh. Aenean vel massa quis mauris vehicula lacinia. Nulla quis diam. Etiam quis </p>
                </div>
            </div>
        </div>
    </main>

Implementing CSS to effectively scale images within a fixed box size

Answer №1

Answer №2

Similar questions

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Designing a drop-down menu that appears visually above its parent

What is the best way to conceal part of a chart or a div in Angular?

Envelop the phrases onto a fresh line

Display an image with HTML

Display identical text using JavaScript filter

Unable to achieve full width for a div within a scrollable container

What are some alternatives to using iframes?

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

Show the res.send() method from express.js without replacing the existing html content

Is it feasible to capture a screenshot of a URL by using html2canvas?

What could be causing the partial transparency in my SVG mask?

JavaScript query-string encoding

The content on the right side is spilling over my footer and causing

Is there a way to update components in Angular without affecting the current URL?

Setting a constant width for text characters across all devices using CSS and HTML

Having trouble connecting local stylesheet on server?

Is there anyone who can provide a comprehensive explanation for what is going on here?

Creating an inclusive h1 header with a logo: A step-by-step guide

The issue with the page not appearing correctly on IE9 is currently being resolved