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

Html – overlay around image in css

I want to make an overlay around image like this
click here

I tried this but it’s not look like I wanted

 background-image: linear-gradient(
        90deg,
        #171717 0%,
        rgba(23, 23, 23, 0.986) 0.97%,
        rgba(23, 23, 23, 0.945) 2.07833333%,
        rgba(23, 23, 23, 0.883) 3.29666667%,
        rgba(23, 23, 23, 0.803) 4.60166667%,
        rgba(23, 23, 23, 0.711) 5.96666667%,
        rgba(23, 23, 23, 0.61) 7.365%,
        rgba(23, 23, 23, 0.504) 8.77166667%,
        rgba(23, 23, 23, 0.398) 10.16%,
        rgba(23, 23, 23, 0.296) 11.505%,
        rgba(23, 23, 23, 0.203) 12.78%,
        rgba(23, 23, 23, 0.122) 13.95833333%,
        rgba(23, 23, 23, 0.059) 15.01666667%,
        rgba(23, 23, 23, 0.016) 15.92833333%,
        rgba(23, 23, 23, 0) 16.66666667%,
        rgba(23, 23, 23, 0) 83.33333333%,
        rgba(23, 23, 23, 0.016) 84.07166667%,
        rgba(23, 23, 23, 0.059) 84.98333333%,
        rgba(23, 23, 23, 0.122) 86.04166667%,
        rgba(23, 23, 23, 0.203) 87.22%,
        rgba(23, 23, 23, 0.296) 88.495%,
        rgba(23, 23, 23, 0.398) 89.84%,
        rgba(23, 23, 23, 0.504) 91.22833333%,
        rgba(23, 23, 23, 0.61) 92.635%,
        rgba(23, 23, 23, 0.711) 94.03333333%,
        rgba(23, 23, 23, 0.803) 95.39833333%,
        rgba(23, 23, 23, 0.883) 96.70333333%,
        rgba(23, 23, 23, 0.945) 97.92166667%,
        rgba(23, 23, 23, 0.986) 99.03%,
        #171717
      );

I want more overlay in left and right and a little on the top

Tags:

2

Answers


  1. 0

    Html code

    <div class="image-container">
    <img src="your-image-url.jpg" alt="Your Image" class="image" />
</div>

    CSS

    .image-container {
    position: relative;
    display: inline-block; 
    overflow: hidden;
}

.image {
    display: block; 
    width: 100%; 
    height: auto; 
}


.image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20%;
    right: -20%; 
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(23, 23, 23, 0.8) 0%, 
        rgba(23, 23, 23, 0.6) 50%,
        rgba(23, 23, 23, 0.8) 100%     );
    z-index: 1; 
}


.image {
    opacity: 0.9;
}
    Login or Signup to reply.
  2. 0

    I have simpler approach to achieve same result. Inside a parent div we need to have two children one img and another div for imageShadow. Now we will align imageShadow above img so that shadow would be apply on image.

    Inside our innerShadow we add box-shadow: inset 0 0 50px 30px black; which will add inner shadow effect for our image.

    It might sound complex but its very simple and much more easy to play with. I hope this will fix issue and if I am missing out or misunderstood something please share.

    Here is code pen link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search