Putting linear-gradient over an image - html

Question

How exactly would I do this?
https://jsfiddle.net/4f2646gx/2/
What I want to do is place the linear gradient lines over the image.
What it looks like now:
The end result should look like this:
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
#img2 {
position: absolute;
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
</style>
<div style="width: 260px; height: 194px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ); border: 3px solid #0059dd;">
<div style="position:relative; width:180px; height:180px">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
</div>
</div>

Answer 1

I'd put all of it in one container, use absolute positioning to layer the elements. Also your background-color style of the gradient element needs to be transparent, otherwise you've got a black box with lines over your image and you can't see it. In this example, you'll also notice that border is moved to the top level container.
#container {
background-color: black;
position:relative;
width:260px;
height:194px;
padding: 0;
border: 3px solid #0059dd;
}
#img1,#img2 {
user-select: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#img1 {
clip-path: circle(85px at center);
}
#grad {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 194px;
cursor: pointer;
background-color: transparent;
background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px );
}
<div id="container">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
<div id="grad"></div>
</div>

Answer 2

To avoid adding any unnecessary markup, you can add a pseudo-element to your container div. Forked JSBin.
<style>
#img1, #img2 {
position: absolute;
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
#img1 {
clip-path: circle(85px at center);
}
.circle-gradient {
width: 260px;
height: 194px;
cursor: pointer;
background-color: #000000;
border: 3px solid #0059dd;
position: relative;
}
.circle-gradient:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px );
}
</style>
<div class="circle-gradient">
<div style="position:relative; width:180px; height:180px">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
</div>
</div>

Answer 3

Because CSS FTW, you can use the background property to stack multiple images & gradients.
In this code snippet, background-size references each background applied : the last value (120px 120px) sets the size of the sky image.
The good news is that it is supported since IE9!
div{
background:
linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ),
url("https://i.imgur.com/4HJbzEq.png") no-repeat center,
url("https://i.imgur.com/BO6KOvw.jpg") no-repeat center;
background-size: auto, auto, 120px 120px;
width: 260px;
height: 194px;
border: 3px solid #0059dd;
background-color: black;
}
<div></div>