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

Html – How can I achieve a colored blur over my image with text

I have an image that I’d like to overlay with a blue blur and text but I don’t know how to go about it. Attached below are the image and the desired result. I’ve tried using CSS overlay but I have no idea how to go about it and get the exact result. I’ll appreciate if I could get help enter image description hereenter image description here

Tags:

2

Answers


  1. 0

    You can achieve this kind of result using absolute positioning.

    .blur {
  width: 40rem;
  height: 20rem;
  position: relative;
}

.blur > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blur > .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: linear-gradient(90deg, rgba(2,96,122,1) 0%, rgba(2,96,122,0.5) 100%);
}

.blur > .overlay > div {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
}
    <div class="blur">
  <img src="https://i.stack.imgur.com/0uMC6.jpg">
  <div class="overlay">
    <div>
      <div>Migrate To Canada With Ease</div>
      <div>Alberta, British Colombia</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can easily do it with linear-gradient and adjust the property values by yourself

      *{
    margin: 0;
    padding: 0;
  }

  .linear-gradient-custom{
    height: 400px;    
    background: linear-gradient(90deg, #02607a, #02607ab7) left top / 100% 100% no-repeat, url(https://i.stack.imgur.com/0uMC6.jpg) center no-repeat;
  }
    <div class="linear-gradient-custom" style="display: flex; flex-direction: column; justify-content: center; padding-left: 100px; color: #fbfaf5; font-size: 24px;">
    <h1>Migrate To <br> <span style="color: #e1414b;">Canada</span> With Ease</h1>
    <h3>Alberta, British Colombia, Manitoba, Quebec</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search