Image Blue Hover
HTML
<div class="wrap">
<h1>Test Page</h1>
<div class="rich-text-editor">
<div class="wrap">
<p>
and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing
a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees,
and but a few stray gleams steal into the inner s
</p>
<a href="http://google.com">
<div class="image-wrap">
<span class="img-span">
<img alt="" src="http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</span>
</div>
</a>
<p>
odo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutr
</p>
</div>
</div>
</div>
CSS
.img-span {
display: block;
width: 100%;
/*position: relative;*/
}
.img-span:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: block;
background-color: transparent;
transition: all .3s ease
}
.img-span:hover:after {
background: rgba(0, 154, 228, 0.6)
}