Question 360508 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 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.
  2. 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.
Please signup or login to give your own answer.

Back To Top
Search