Html - I am trying to use Box-Shadow property it is working fine but when i use the display as flex it will not appear

ManthanSharma
March 16, 2024
166 views
0 votes
2 Answers

HTML CODE —

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallary Project</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1>My gallary</h1>
            <div class="gallary">
                <figure class="card">
                    <img src="ig/assets/image1.jpg" alt="">
                    <figcaption>Image1</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image2.jpeg" alt="">
                    <figcaption>Image2</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image3.jpeg" alt="">
                    <figcaption>Image3</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image4.jpeg" alt="">
                    <figcaption>Image4</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image5.jpeg" alt="">
                    <figcaption>Image5</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image6.jpeg" alt="">
                    <figcaption>Image6</figcaption>
                </figure>

                <figure class="card">
                    <img src="ig/assets/image7.jpeg" alt="">
                    <figcaption>Image7</figcaption>
                </figure>



            </div>

        </div>

    </div>
</body>
</html>

css Code—-

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper{
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.container{
    max-width: 1200px;


    margin:0px auto;
    height: 100%;
}
.container h1{
    text-align: center;
}

.gallary{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between ;
}

.card{
    width: 32%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
}

.card img{
    width:100%;
    height:100%;
    filter: grayscale(100%);
    box-shadow: 40px 40px 20px #333;
}

So the shadow have to appear alongside the image but it is not.I am trying to use Box-Shadow property it is working fine but when i use the display as flex it will not appear. I am using the box shadow on flex items as in code.
It works fine i i remove the flex display.
dsbjbks cknsklsm knkslmc

Answers

- Richie
- March 16, 2024 at 11:36 am
- 0 votes
0
Slight adjustment to your css hopefully might do the trick for you
.card{ width: 32%; position: relative; overflow: hidden; border-radius: 10px; margin-bottom: 20px; box-shadow: 40px 40px 20px #333; } .card img{ width:100%; height:100%; filter: grayscale(100%); }
Login or Signup to reply.

- dutchcelt
- March 16, 2024 at 11:55 am
- 0 votes
0
Two things are happening.
1. The image can’t really show the shadow due to its display mode.
2. The card has overflow hidden, this would clip most of the shadow.
So, you could consider changing these rules:
```
.card{
    width: 32%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.card img{
    display:block; /* it's now a 'box' */
    filter: grayscale(100%);
    box-shadow: 40px 40px 20px #333;
}
```
Login or Signup to reply.