CODEWITHSUNDEEP
css
Jacnial
Jacnial

Reputation: 63

How to make transparent border show box shadow underneath and not the div's background colour?

I have a div and I am trying to add a transparent border to it with a box-shadow such that the transparent border shows the box-shadow underneath and not the div's background color.

Here is a JSFiddle I created to showcase my problem: https://jsfiddle.net/143k7myj/.

body {
  background-color: #f8f8f8;
}

div {
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border: 10px solid transparent;
  /* background-clip: content-box; */
}

div:hover {
  border-color: white;
}
<div></div>

As you can see, when I hover over the div, the border shows with it's white color. If I don't hover over it, it show's the 'transparent' border. However, it show's the div's background colour underneath and not the box-shadow of the div that I want to achieve.

One of my attempts was to use background-clip: content-box, however, then the transparent border shows the solid background-colour of the body.

How can I have achieve a transparent border such that the box-shadow of the div is shown underneath the transparent border and not the background color of the div. Thank you.

Upvotes: 0

Views: 1053

Answers (2)

Aman
Aman

Reputation: 1550

You can achieve with Pseudo-element :before

body {
  background-color: #eee;
}

div {
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);
  border-radius: 3px;
  position: relative;
  /* background-clip: content-box; */margin-top: 30px;margin-left: 30px;
}
div:before {
    content: "";
    border: 10px solid #fff;
    position: absolute;
    left: -10px;
    top: -10px;
    right: -10px;
    bottom: -10px;
    opacity: 0;
border-radius: 3px;
}

div:hover:before {
  opacity: 1;
}
<div></div>

Upvotes: 1

Hao Wu
Hao Wu

Reputation: 20669

Edit:

You may achieve it with pseudo element using some workaround:

body {
  background-color: #ddd;
  margin: 0;
  padding: 10px;
}

div {
  /* change the border width here */
  --border-width: 10px;
  
  width: 489px;
  height: 169px;
  background-color: #46aae3;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: var(--border-width);
  position: relative;
}

div::before {
  content: '';
  display: block;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  margin: calc(var(--border-width) * -1);
  position: absolute;
  border-radius: inherit;
}

div:hover {
  box-shadow: 0px 4px 15px transparent;
}

div:hover::before {
  background-color: white;
  z-index: -1;
}
<div></div>

Upvotes: 1

Related Questions