Html

<div class="box">
    <h1>Transparent Text Effects</h1>
</div>

CSS

body
{
	margin: 0;
	padding: 0;
}
section
{
	position: relative;
	width: 100%;
	height: 100vh;
	background: url(bg.jpg);
}
section:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(bg.jpg);
	opacity: .5;
	mix-blend-mode: hard-light;
}
section:hover:before
{
	animation: animate .2s linear infinite;
}
@keyframes animate
{
	0%
	{
		background-position: 0 0;
		filter: hue-rotate(0deg);
	}
	10%
	{
		background-position: 5px 0;
	}
	20%
	{
		background-position: -5px 0;
	}
	30%
	{
		background-position: 15px 0;
	}
	40%
	{
		background-position: -5px 0;
	}
	50%
	{
		background-position: -25px 0;
	}
	60%
	{
		background-position: -50px 0;
	}
	70%
	{
		background-position: 0 -20px;
	}
	80%
	{
		background-position: -60px -20px;
	}
	81%
	{
		background-position: 0 0;
	}
	100%
	{
		background-position: 0 0;
		filter: hue-rotate(360deg);
	}
}

See Demo