<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Transform</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
    
<body>
    <main>
        <section>
            <!-- One -->
            <aside class="card one">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800486-ffbf5777-4874-48c1-a162-31ee0f9ed7c8.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>Fujifilm X-T10 Camera</h1>
                    <p>$350</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Two -->
            <aside class="card two">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800474-7f5d69c1-1829-414c-a8d3-0479b6b8697c.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D7200 Camera</h1>
                    <p>$500</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Three -->
            <aside class="card three">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800461-933e65ef-705c-42c2-adf5-0e04053bcfec.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D810 Camera</h1>
                    <p>$230</p>
                    <button>Book Now</button>
                </div>
            </aside>
        </section>
    </main>
</body>
</html>

        *,*::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        main {
            width: 100vw;
            height: 100svh;
            background-color: #0ebac5;
        }

        .card {
            padding: 10px;
            display: flex;
            width: 20em;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 2px 2px 14px 2px rgba(0,0,0,.5);

            transform: translate(150%, 100%);
        }

        .card h1 {
            font-family: calibri;
            font-size: 12px;
        }

        button {
            background-color: #000;
            color: white;
            padding: 0.5em 1.5em;
            border: 0;
            cursor: pointer;
            transform: translateY(30px);
            transition: 0.5 opacity ease;
        }

        button:hover {
            background-color: #0ebac5;
        }

        .img-wrap {
            width: 130px;
        }

        .img-wrap img {
            width: 100%;
        }

        .content-wrap {
            margin-left: 1em;
        }

        .card.two {
            margin: 2em 0;
        }

        @media screen and (max-width:820px ) {
            .card {
            transform: translate(100%, 50%);
        }
        }

        @media screen and (max-width:650px ) {
            .card {
            transform: translate(50%, 50%);
        }
        }

        @media screen and (max-width:500px ) {
            .card {
            transform: translate(30%, 50%);
        }
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.