This is as close as I can get it. Seems to work in Firefox, Chrome - Safari has issues but it still works albeit not 100%. Don't know about anything else. It uses the clip: rect() css method, now superceeded by clip-path but that don't work in much at the moment. Is it worth the effort, no.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Overlay Background</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('.overlay a').css('cursor' , 'pointer').mouseenter(function(){
$('.background_image').css({'-webkit-filter': 'none', 'filter': 'none'});
});
$('.overlay a').mouseout(function(){
$('.background_image').css({'-webkit-filter': 'grayscale(100%)', 'filter': 'grayscale(100%)'});
});
});
$(document).ready(function(){
var container_width = $(".container").css("width").replace(/[^-\d\.]/g, '');
var overlay_width = $(".overlay a").css("width").replace(/[^-\d\.]/g, '');
var y = container_width - overlay_width;
var y = y / 2;
var newwidth = + overlay_width + y;
if ($(window).width() > 481) {
$(".overlay").css('clip' , 'rect(185px,' + newwidth + 'px, 250px,' + y + 'px');
}
if ($(window).width() < 480) {
$(".overlay").css('clip' , 'rect(172px,' + newwidth + 'px, 250px,' + y + 'px');
}
});
$(document).ready(function(){
$(window).resize(function() {
var container_width = $(".container").css("width").replace(/[^-\d\.]/g, '');
var overlay_width = $(".overlay a").css("width").replace(/[^-\d\.]/g, '');
var y = container_width - overlay_width;
var y = y / 2;
var newwidth = + overlay_width + y;
if ($(window).width() > 481) {
$(".overlay").css('clip' , 'rect(185px,' + newwidth + 'px, 250px,' + y + 'px');
}
if ($(window).width() < 480) {
$(".overlay").css('clip' , 'rect(172px,' + newwidth + 'px, 250px,' + y + 'px');
}
});
});
</script>
<style>
* {
box-sizing: border-box;
}
.container {
position: relative;
height: 300px;
width: 85%;
margin: 0 auto;
max-width: 1200px;
}
@media screen and (max-width: 900px) {
.container {
width: 95%;
}
}
.background_image {
position: relative;
background-image: url(http://lorempixel.com/1200/400/nature/6/);
background-position: center center;
-webkit-filter: grayscale(1);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
height: 300px;
}
.background_image:hover {
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.overlay {
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
background-image: url(http://lorempixel.com/1200/400/nature/6/);
background-position: center center;
-webkit-filter: grayscale(0);
clip: rect(185px, auto ,250px, auto);
}
@media screen and (max-width: 480px) {
.overlay {
clip: rect(165px, 850px ,250px,250px);
}
}
.overlay span {
width: 100%;
position: absolute;
bottom: 50px;
}
.overlay a {
width: 50%;
margin: 0 auto;
display: block;
padding: 18px 0;
text-align: center;
font-family: helvetica, sans-serif;
font-size: 18px;
line-height: 25px;
color: #fff;
border: 1px solid #fff;
}
@media screen and (max-width: 900px) {
.overlay a {
width: 65%;
}
}
@media screen and (max-width: 480px) {
.overlay a {
width: 90%;
padding: 12px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="overlay">
<span><a>Let's talk and see if this is right for you</a></span>
</div>
<!-- end overlay -->
<div class="background_image"></div>
</div>
<!-- end container -->
</body>
</html>
AdChoices