Strugging to get an affect similar to this when you hover over the images an opaque layer is produced on top.

 

I'm sure this is simple using an image for both but surely theres an easier way with CSS? I've tried myself but the background on hover just seems to go behind the image if the <img> tag is in the source code and replaces the image if it is a backgorund-image in the CSS.

 

I've found some tutorials but they aren't quite what I'm looking for and contain alot more code than I'm sure is required!

Edited July 23, 201214 yr by jpwd

There is no image being used by looking at the source code, the hover is based on

.view-eighth .mask {

background-color: rgba(0, 174, 239, 0.3);

top: 300px;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all .5s ease-in-out 0s;

-moz-transition: all .5s ease-in-out 0s;

-o-transition: all .5s ease-in-out 0s;

-ms-transition: all .5s ease-in-out 0s;

transition: all .5s ease-in-out 0s;

}

 

.view-eighth .mask-vis {

background-color: rgba(241, 88, 74, 0.3);

top: 300px;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all .5s ease-in-out 0s;

-moz-transition: all .5s ease-in-out 0s;

-o-transition: all .5s ease-in-out 0s;

-ms-transition: all .5s ease-in-out 0s;

transition: all .5s ease-in-out 0s;

}

 

first one covers the blue and 2nd is the red.

 

hope this helps