Dot pattern overlay that fades in on image

Question

I want to have a dot pattern that overlays an image, but I need it to be transparent on the right side and I need it to become opaque/visible to the left side - like using a gradient to reveal the pattern.

<html>
<head>

<style>
.image-container {
  display: block;
  background: url(https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg) no-repeat;
  background-size: cover;
  height: 400px;
  width: 837px;
}

.dot-overlay {
  background: url(square-pattern.svg);
  width: 100%;
  height: 400px;
}
</style>

</head>
<body>

   <div class="image-container">
      <img class="dot-overlay">
   </div>

</body>
</html>

The Result

This is the result I want to achieve

EDIT: Apologies, I forgot to mention that I needed this solution to be responsive (even though the image in my example is fixed size) and preferably I'd also like the pattern dots to remain the same size when the image is resized.

Thankfully, Temani Afif solution manages this and gives control over the gradient too! Also, to make the dots more square change percentages to 50% each e.g. radial-gradient(farthest-side,blue 50%,transparent 50%)

Could you not just overlay the background image with a transparent image that has the sqaures rather then try to do this with code? Work smarter not harder? — Dylan Anlezark, Nov 20 '19 at 04:45
May be this could help you https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element — Awais, Nov 20 '19 at 08:02
@DylanAnlezark my edit explains why I didn't want to take this approach, unfortunately I forgot to mention those details — C9C, Nov 20 '19 at 15:25

score 7 · Accepted Answer · answered Nov 20 '19 at 09:06

You can do this with CSS using radial-gradient for the dots and mask for the gradient effect:

.image-container {
  background: url(https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg) no-repeat;
  background-size: cover;
  height: 300px;
  width: 600px;
  position:relative;
}
.image-container:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:                         /* v-- Change to adjust the distance between circles */
    radial-gradient(farthest-side,blue 80%,transparent 82%) 
    0 0/
    10px 10px; /* Change to adjust the size */
  
  -webkit-mask:linear-gradient(to right,#fff,transparent);
  mask:linear-gradient(to right,#fff,transparent);
}

<div class="image-container"></div>

Alexandr_TT · Answer 2 · 2019-11-20T09:42:11.737

Try to place the image inside the svg and place a rectangle with a pattern of dots on top of the image.

<style> 
 .image-container { 
   height: 100%; 
   width: 100%; 
 </style>
      
 <div class="image-container" >  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 837 400"  preserveAspectRatio="xMinYMin meet"  >
   <defs>  
   
 <pattern id="ptn1"
   x="0" y="0" width="5" height="5"
             patternUnits="userSpaceOnUse" >
               
            <g fill="#7D515C"  fill-opacity="0.5">
             <path d="M 0,3 H 2 V 5 H 0 Z" style="fill:#222" />
   </g> 
  </pattern>    
</defs>    

<g transform="translate(-40 0)">
<image xlink:href="https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg" width="100%" height="100%"  />  
  
   <rect width="800" height="400" fill="url(#ptn1)" />  
 </g> 
 
</svg>
 </div>

Bonus

Pattern Animation Examples

The image below shows how the pattern looks.

<pattern id="ptn1"
   x="0" y="0" width="22" height="22"
             patternUnits="userSpaceOnUse" >

            <g fill="#85D2FF"  fill-opacity="0.9">
              <rect x="1" y="1" width="10" height="10" />
                <rect x="11" y="11" width="10" height="10" />
            </g> 
  </pattern>

Using the animation of resizing the points of the pattern, you can get interesting effects:

Dots increase in size and overlap the picture

<rect x="0" y="0" width="2" height="2" >
 <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
    <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
</rect>

Post-Click Animation

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="22" height="22"
             patternUnits="userSpaceOnUse" >
               
            <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
    <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
      <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
    </rect>
     
 </pattern>   
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>  
</div>

Horizontal blinds

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="11" height="22"
             patternUnits="userSpaceOnUse" >
               
    <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
    <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
      <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
    </rect>
 </g>    
 </pattern>   
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>  
</div>

Vertical blinds

<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">  
<defs>
 <pattern id="ptn1"
   x="0" y="0" width="22" height="11"
             patternUnits="userSpaceOnUse" >
           <g fill="skyblue"  fill-opacity="0.8">
             <rect x="0" y="0" width="2" height="2" >
    <animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
      <animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
    </rect> 
   </g> 
     
 </pattern>   
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%"  /> 
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>  
</div>

Thanks for the suggestion, but I couldn't quite figure out how to apply a transparency over the pattern and how it would maintain its size when the image would be scaled (see my edit). The animations are pretty cool! — C9C, Nov 20 '19 at 15:27

Dot pattern overlay that fades in on image

2 Answers2

Bonus