Putting linear-gradient over an image

HTML & CSS
1

How exactly would I do this?

What I want to do is place the linear gradient lines over the image.

What it looks like now:

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

The end result should look like this:

2

Hi there asasass,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
#container {
    position: relative;
    width: 16.25em;
    height: 12.125em;
    border: 0.25em solid #0059dd;
    background-color: #000;
    cursor: pointer;
 }

#container div:first-of-type {
    position: relative; 
    width: 11.25em;
    height: 11.25em;
 }

#container div:last-of-type {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient( to right,transparent 0, transparent  5.1875em,#0059dd 5.1875em, #0059dd 5.375em, transparent 5.375em, transparent 10.875em, #0059dd 10.875em, #0059dd 11.0625em, transparent 11.0625em,transparent 16.25em ); 
 }

#img1, #img2 {
    position: absolute;
    top: 54%;
    left: 72%;
    transform: translate( -50%, -50% );
  }

#img1 {
    border-radius: 50%;
  }
</style>

<div id="container">
 <div>
  <img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113" alt="">
  <img id="img2" src="https://i.imgur.com/4HJbzEq.png" width="180" height="180" alt="">-
 </div>
 <div></div>
</div>

</body>
</html>

AS support for clip-path is rather patchy…

Can I use clip-path

…with border-radius. :winky:

coothead

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.