Hover Colour making Headers unreadable

Question

I'm trying to achieve an effect like on this website, http://www.trask-industries.com/#/media, when the content is hovered over it a yellow colour consumes it and the colour of the header changes. When I attempted to re-create this effect my headers become unreadable. jsfiddle.net/m8Z25

.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
    background-color: white;
    opacity: 0.30;
    transition: .2s;
    webkit-transition: .2s;
   -webkit-transition: all 500ms ease;
}

h1:hover
{
    color: black;
}

h2
{ 
   color: red;
   position:absolute;
   bottom: -10;
   padding-left: 30;
}

h1
{
    color: black;
}

Answer 1

it is not 100% clear what you are trying to achieve here...

From what I can tell. it becomes nearly un-readable because you are adding opacity to the content container. This affects all content (including the background) so everything get faded.

It depends what you have behind the content containers (your sites background).

The site you demo-ed does not use the opacity to change anything. I imagine it just changes the background colour from a lighter purple to darker purple

try removing the opacity:0.30; and updating the background/text colours instead.

see This jsFiddle for an example of just changing colours vs using opacity...