CODEWITHSUNDEEP
htmlcss
Saja
Saja

Reputation: 183

Transparent border to hidden background with CSS

I've thrown together a JSFiddle to try to show what I'm thinking, but basically I'd like to have a hidden background under the whole site and have some links display this background through a transparent border when they are hovered over. I can't figure out how to hide the background and still be able to show it in the border during a hover.

Here's what I've got so far.

body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  color: #222;
  border-bottom: 1px solid transparent;
}
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 10;
}
.content {
  position: relative;
  z-index: 15;
}
<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a>
    </li>
    <li><a>Nav 2</a>
    </li>
    <li><a>Nav 3</a>
    </li>
    <li><a>Nav 4</a>
    </li>
  </ul>
</div>

Any ideas?

Upvotes: 3

Views: 1258

Answers (2)

Mr_Green
Mr_Green

Reputation: 41852

Something like this?

Fiddle

li a:hover {
  color: #222;
  border-bottom: 1px solid transparent;

  /* Added styles */
  background-image: linear-gradient(white, white), url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-clip: content-box, padding-box;
  background-attachment: fixed;
}

Or do you want to show the image only to border-bottom?

Working Fiddle

Upvotes: 2

Abhishek T.
Abhishek T.

Reputation: 1133

Is it something you want. let me know your view.

    body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: #666;
      text-align: center;
      padding: 10px 16px;
      text-decoration: none;
    }

    li a:hover {
      color: #222;
      border-bottom: 10px solid transparent;
      background-image: linear-gradient(transparent, transparent), url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
      background-clip: content-box, padding-box;
    }

    .overlay {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: #FFF;
      z-index: 10;
    }

    .content {
      position: relative;
      z-index: 15;
    }
<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a></li>
    <li><a>Nav 2</a></li>
    <li><a>Nav 3</a></li>
    <li><a>Nav 4</a></li>
  </ul>
</div>

Another Fiddle is as below...for bottom border only-

body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

li a:hover {
  color: #222;
  border-bottom: 10px solid transparent;
    
 border-image: url(http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png) 5% round;
  cursor:pointer;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 10;
}

.content {
  position: relative;
  z-index: 15;
}
<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a></li>
    <li><a>Nav 2</a></li>
    <li><a>Nav 3</a></li>
    <li><a>Nav 4</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions