JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="content">
  <a href="#" class="translucent">
    <div>Button</div> 
  </a>
</div>
<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

CSS

body {
  background: url("http://img.schieb.de/wp-content/uploads/2014/08/osx-yosemite-wallpaper-sunset.jpg") no-repeat 50% 50% fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.content {
    padding: 20px;
}
.translucent {
  position: absolute;
    left: 200px;
    top: 200px;
  display: block;
  overflow: hidden;
  color: #08c;
  visibility: hidden;
}
.translucent:before {
  visibility: visible;
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  bottom: -5%;
  background: inherit;
  -webkit-filter: url("#blur") saturate(2);
  -moz-filter: url("#blur");
  filter: url("#blur");
}
.translucent div {
  background: rgba(235,235,235,0.6);

  position: relative;
  display: block;
  visibility: visible;
    padding: 25px;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.translucent div:hover {
  background: rgba(235,235,235,0.44);
}

JavaScript

function findBackground(element) {

	if(element.css("background-image") == 'none') {
		return findBackground(element.parent());
	}
	else {
    console.log(element);
		return element.css("background");
	}
}

$(".translucent").each(function(index) {
  console.log(findBackground($(this).parent()));
		$(this).css({
			"background": findBackground($(this).parent()),
		});
	});