Search code examples
csstransparency

"Transparent" border around items on background

There have been several questions regarding some kind of transparent border but not what I am looking for, I think.

enter image description here

It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border? So you have a continuous background and each item on top of it "cuts out" some part of it. A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.

If not, what would be the way to achieve a responsive design like that?

Sorry, I don't know any other way to explain it. Thank you.

See example/fiddle here: jsfiddle.net/14nn2pLy

   html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #fd1dfa;
}

#main_header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 200px;
    background: url() no-repeat center top;
    background-size: contain;
}

#main_footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 200px;
    background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
    background-size: contain;
}

#icons {
    position: fixed;
    bottom: 0px;
    width: 900px;
    height: 75px;
    background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
    border: 10px;
    border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>

<div id="main_footer">
    <div id="icons"></div>
</div>

Solution

  • My thought process

    The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.

    Example:

    .bg {
  position: relative;
  height: 250px;
  width: 500px;
  background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}

.border {
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  margin: auto;
  padding: 10px;
  background: steelblue;
  border: 10px solid black;
}

.no-border {
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  margin: auto;
  padding: 10px;
  background: steelblue;
  border: 10px solid #F7F2D5;
}
    <div class="bg">
  <div class="border">black border</div>
  <div class="no-border">"transparent" border</div>
</div>

    Solution:

    The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.

    body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
  background-size: cover;
}

.container {
  height: 140px;
  width: 618px;
  position: relative;
  top: 40%;
  margin: 0 auto;
}

.bg {
  height: 140px;
  width: 618px;
  position: relative;
}

.icon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 25.25%;
  left: 38.25%;
  z-index: 1;
}

.icon:hover+.bg {
  clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
    <div class="container">

  <div class="icon">
    <img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
  </div>

  <div class="bg">
    <img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
  </div>

</div>