Issue with hover opacity and headers - html

Question

I want my website to have the same effect this website has: Trask Industries
When the upper right image is hovered the text appears and yellow covers the image.
This is the effect I am failing to recreate in CSS and Html, using headers and hover opacity. In my attempts the headers become opaque rather than standing out like on that site. I also don't know how to make the headers appear and disappear on hover.
Here is the jsfiddle of my attempt.
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover {
color: black;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}

Answer 1

You must wrap the h1 and h2 in a div, and you would animate that div in css.
I also added a same class for the contents.
Here is an updated fiddle:
http://jsfiddle.net/bzm6T/2/
Basically, this is the updated code:
Code:
.contents:hover > div {
color: black;
opacity: 1;
}
.contents div {
opacity: 0;
display: block;
width: 100%; height: 100%;
background: rgba(255,255,255,0.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
<div class="container">
<a href="articleF.html" class="contents content1">
<div>
<h1>The Low Stakes of Modern life</h1>
<h2>Default 1Default 1Default 1Default 1Default 1Default 1</h2>
</div>
</a>
<a href="articleA1.html" class="contents content2">
<div>
<h1>AARON SWARTZ</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleA2.html" class="contents content3">
<div>
<h1>JOBILLY BOOP</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleD.html" class="contents content4">
<div>
<h1>Content4</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents content5">
<div>
<h1>Content5</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
<a href="articleK1.html" class="contents Content6">
<div>
<h1>Content6</h1>
<h2>Cats Can Puuuuur</h2>
</div>
</a>
</div>

Answer 2

A slightly different approach, but basically the same with CSS transition: FIDDLE
.holder {
width: auto;
margin: 10px auto;
border: 1px solid black;
overflow: hidden;
}
.leftdiv {
float: left;
background-color: blue;
height: 100%;
color: white;
}
.picdiv {
float: right;
background-color: orange;
}
.picdiv img {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.picdiv img:hover {
opacity: 0;
}