JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<div class="outer">
    <div class="content">
        <a href="http://www.google.com">link</a>
    </div>
    <div class="background">
       <a class="background-link" href="http://www.google.com"></a>
    </div>
</div>

CSS

.outer {
    width:210px;
    height:210px;
    background-color:blue;
    float:left;
    cursor: pointer;
}

.content {
    width:180px;
    height:50px;
    top:50px;
    background-color:green;
    z-index:100;
    position:absolute;
}

.background {
    width:200px;
    height:200px;
    background-color:orange;
    z-index:-100;
}

.background-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

.outer .background:hover,
.outer .content:hover + .background,
.outer .background .background-link:hover {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}