lundi 16 mai 2022

How to zoom a picture while make it contained

my "wrapper" div is the most outlayer container. It consists of a picure and some text below. I want to use CSS (not yet learned JS...) method to realize the effect that, when mouse hovering over the picure area, the picure zoom-in a little, but still remain inside the shadowed box.

Below is my html code and css code. It did give me zoom-in effect, but the picture just ... stick out, how can I fix this (hopefully without using Javascript)

-- html code --

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>shadow block | link with graphics and info</title>
    <link rel="stylesheet" type="text/css" href="sectionlink_pic.css">
</head>
<body>

        <div class="wrapper">
            <div class="image">
                <img src="https://images.pexels.com/photos/262508/pexels-photo-262508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
            </div>
            <div class="infocontent">
                <h3>Home Security Blog</h3>
            </div>
        </div>

</body>
</html>

-- css --

.wrapper {
    display: flex;
    flex-direction: column;
    width: 400px;
    justify-content: center;
    align-items: center;
    border-radius: 3rem;
    box-shadow: 0.6rem 0.6rem 1.2rem #d2dce9, -0.5em -0.5em 1em #ffffff;
    padding: 2rem;
    z-index: 100;
}

.wrapper:hover {
    text-shadow: 5px 5px 4px lightgray;
    transition-duration: 0.2s;
    cursor: pointer;
}

.wrapper .image img {
    width: 100%;
    object-fit: cover;
    border-radius: 2rem;
    cursor: pointer;

}

.wrapper .image:hover img {
    transform: scale(1.5);
}

.wrapper .infocontent {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Consolas;
    color: #36187d;
    cursor: pointer;
}

body {
    background-color: #f2f3f7;
    padding-top: 90px;
    padding-left: 100px;
}

Aucun commentaire:

Enregistrer un commentaire