Text on image hover in responsive grid - responsive-design

Question

I've made this responsive image grid.
http://jsfiddle.net/ZhA6a/
<section class="project_main_container">
<ul>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
</div>
</div>
</li>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
</div>
</div>
</li>
</ul>
</section>
ol, ul {
list-style: none;
line-height: 0;
}
.project_main_container {
width: 100%;
}
.project_container {
float: left;
width: 33.3333333333333333333333333333333333333333333333333%;
background-size:cover;
overflow:hidden;
}
.project_image {
width: 100%;
}
#media only screen and (max-width : 1000px) {
/*row of two boxes*/
.project_container{
width: 50%;
}
}
Each picture represents a design case I've done. I want each image to darken and a text title to show in the middle of the image on hover.
I know that the effect I'm describing is existing but I can't get it working with the responsive grid.
I hope someone will help me - Thanks!

Answer 1

You can do this using :hover with some CSS3 filters. The idea is to add your title as an absolutely positioned element within your grid blocks, and hide it by default. On hover the title will have a display:block applied to it so it appears. And the image will have a filter:brightness applied to darken it a bit.
HTML
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/3_800.jpg"></img>
<h1>Project Title</h1>
</div>
</div>
</li>
CSS
.project_media h1 {
text-align:center;
position:absolute;
top:50%;
width:100%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
color:#FFFFFF;
font-family:Arial;
text-transform:uppercase;
display:none;
}
.project_container:hover img {
filter: brightness(0.3);
-webkit-filter:brightness(0.3);
-moz-filter:brightness(0.3);
}
.project_container:hover h1 {
display:block;
}
And the working demo.

Answer 2

Something like this http://jsfiddle.net/ZhA6a/1/
No need for js. You can adjust the text position or colour as you like, this is just an example so you get the idea
<section class="project_main_container">
<ul>
<li>
<div class="project_container">
<div class="project_media">
<img class="project_image" src="http://payload112.cargocollective.com/1/3/97886/4550499/2_800.jpg"></img>
<p>text</p>
<div class="dark"></div>
</div>
</div>
</li>
</ul>
</section>
CSS
p {
display: none;
position: absolute;
top: 0;
left: 0;
}
.project_media {
position: relative;
}
.project_media .dark {
display: none;
background: black;
opacity: 0.3;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.project_media:hover .dark {
display: block;
}
.project_media:hover p {
display: block;
}
.project_media:hover img {
opacity: 0.8;
}