CODEWITHSUNDEEP
htmlcssimage
user8859973
user8859973

Reputation:

Putting linear-gradient over an image

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:

enter image description here

The end result should look like this:

enter image description here

<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>

Upvotes: 1

Views: 867

Answers (3)

GuCier
GuCier

Reputation: 7425

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>

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

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>

Upvotes: 1

webdevdani
webdevdani

Reputation: 1102

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>

Upvotes: 1

Related Questions