Hi readers, Today in this blog you’ll learn how to create Background Image ColorOverlay Effect by using Html and CSS. Guys as you can see clearly in this post that how to added different gradients color as overlay effect at given bg(background) pictures. Learn about color overlay is not much difficult task. We place tutorials for learn such as simple and basic way.

Hope this given below video tutorial clear your all doubts about overlay effects

Watch Tutorial of Image Color Overlay effect using Html And CSS

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>How to create Image Color Overlay effect using Html And CSS</title>
  </head>
  <body>
      <div class="container">
          <div class="img"></div>
          <div class="overlay"></div>

          <div class="text">
              <h2>Hi Developers</h2>
              <h3>It's Overlay Effect</h3>
          </div>
      </div>
  </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
  }
  .container{
      position: relative;
      display: flex;
      min-height: 100vh;
      background: #040124;
      align-items: center;
      justify-content: center;
  }
  .container .img{
      background: url(img.jpg);
      height: 400px;
      width: 600px;
      position: absolute;
      background-size: cover;
      background-position: center;
  }
  .container .overlay{
      height: 400px;
      opacity: 0.7;
      width: 600px;
      background: linear-gradient(to bottom,red,blue);
      position: absolute;
  }
  .text{
      z-index: 2;
      color: white;
      font-size: 30px;
      text-align: center;
  }
  h3{
      font-family: sans-serif;
      font-weight: normal;
      font-size: 49px;
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files. [Source code includes images also]

How to create Image Color Overlay effect using Html And CSS

Watch Tutorial of Image Color Overlay effect using Html And CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding