How to achieve image enlargement with css

With the popularity of the Internet and mobile devices, images in web pages and apps have become an indispensable element. But what should we do when we need to enlarge the image to a certain extent? This article will introduce how to use CSS to achieve the enlargement effect of images.

1. Basic concepts

To achieve the magnification effect of images, we need to understand the following two CSS properties:

1. transform property: used to rotate elements , scaling, moving and other transformation operations.
2. Transition attribute: used to define the transition effect of an element from one state to another, such as fade in and fade out, rotation, etc.

2. Basic implementation

1. Magnification effect

The following is a simple HTML code snippet, including an image and a button:

    <img src="sample.jpg" class="pic" />
    <button onclick="enlarge()">Enlarge</button>

Among them, the class of the picture is pic, and the function called by the button is enlarge(). Next, we can use CSS to achieve the enlargement effect of the image:

    .pic {
        transition: all 0.3s;
    }

    .enlarge {
        transform: scale(1.5);
    }

In the CSS style of .pic, we define a 0.3 second transition effect, so that there will be a smooth transition when the image is enlarged transition. In the .enlarge class, we use the transform attribute and set the image enlargement ratio to 1.5 times. Now, we only need to define the enlarge() function in JavaScript and let it add the .enlarge class to the image when the button is clicked:

    function enlarge() {
        document.querySelector('.pic').classList.add('enlarge');
    }

In this way, when we click the button, the image will be enlarged. If we need to restore the image size, we can define a shrink() function in JavaScript and let it remove the .enlarge class:

    function shrink() {
        document.querySelector('.pic').classList.remove('enlarge');
    }

2. Enlarge and move effects

If we need to enlarge the picture and perform a translation operation on it at the same time, how should we achieve it? At this time, we need to use the translate() function in transform. The following is a sample code:

    .move {
        transform: scale(1.5) translate(20px, 20px);
    }

In this example, we still use the scale() function to enlarge the image, but at the same time combine it with the translate() function to move the image 20 pixels to the lower right. Using this method, we can easily achieve the effect of enlarging and moving pictures.

3. Practical Cases

In addition to the basic amplification effect, we can also combine other CSS properties to achieve richer image effects. Here are a few practical cases:

1. Picture Magnification Mask

In this case, we use pseudo elements to achieve the black mask effect, and then enlarge the picture Place it underneath the mask to create a visual effect. The sample code is as follows:

    <div class="wrapper">
        <img src="sample.jpg" class="pic" />
        <div class="mask"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .pic {
        transition: all 0.3s;
        display: block;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .wrapper:hover .mask {
        opacity: 1;
    }

    .wrapper:hover .pic {
        transform: scale(1.2);
    }

In the above code, we use pseudo elements to create masks, and achieve the fade effect of the mask through the opacity attribute. For image enlargement operation, just use the transform attribute directly in the :hover pseudo-class. Finally, we need to set the .wrapper to inline-block so that the image and mask line up correctly.

2. Image enlargement thumbnail

In some e-commerce websites, we often see a set of thumbnails. When we click on one of the images, This will jump to a new page showing a larger version of the image. What if we want to display an enlarged version of the current page?

In this case, we can add an enlarged version of each thumbnail, and then use CSS to place these enlarged versions in the same position to achieve the enlargement effect. The sample code is as follows:

    <div class="wrapper">
        <img src="thumb1.jpg" class="thumbnail" data-large="large1.jpg" />
        <img src="thumb2.jpg" class="thumbnail" data-large="large2.jpg" />
        <img src="thumb3.jpg" class="thumbnail" data-large="large3.jpg" />
        <img src="thumb4.jpg" class="thumbnail" data-large="large4.jpg" />

        <div class="enlarge"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .thumbnail {
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .enlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s;
        z-index: -1;
    }

    .thumbnail:hover + .enlarge {
        transform: scale(1.5);
        opacity: 1;
        z-index: 1;
    }

In this example, we add the data-large attribute to each thumbnail to store the corresponding enlarged version. Then, we defined an .enlarge element in HTML to display the enlarged image. In CSS, we set the z-index of the .enlarge element to -1 so that it is placed below the thumbnail. Finally, when the thumbnail is hovered, we can place the corresponding enlarged version at the same position to achieve the enlargement effect.

4. Summary

In this article, we introduced how to use CSS to achieve the image magnification effect. Whether it is basic enlargement and movement, or richer cases, it can be easily achieved through the transform and transition attributes. I hope this article can help you achieve better results in web development.

The above is the detailed content of How to achieve image enlargement with css. For more information, please follow other related articles on the PHP Chinese website!