Transparent hover grid

hover-grid-style.css

.challenge-grid {
    margin: 30px 0;
overflow: hidden;
}
.suggested-challenges h2 {
margin-top: 60px;
border-bottom: 1px solid #d9d9d9;
padding-bottom: 7px;
}
.challenge-grid .idea-block {
float:left;
margin-bottom:-3px;
}

.challenge-grid .idea-block span {
opacity: 0;
width: 203px;
height: 232px;
margin-top: -235px;
padding: 0px 15px 0px 15px;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
display: block;
}
.challenge-grid .idea-block:hover span {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.challenge-grid .idea-block span p {
    color: #fff;
font-family: open sans;
text-transform: uppercase;
font-size: 1.6em;
line-height: 1.3;
}
.challenge-grid .idea-block span a {
position: absolute;
bottom: 10px;
text-align: left;
right: 15px;
font-weight:bold;
}
.challenge-grid .idea-block span a:after {
 content: " ›"   
}
.challenge-grid .idea-block span a:first-of-type {
bottom: 32px;
}

hover-grid.html

<div class="challenge-grid">
        <div class="idea-block"><img src="/img/suggested/epic/square_cyclelengthofUK.jpg"><span><p>Cycle the length of the UK</p><a href="/challenge/create?title=Cycle the length of the uk&amp;cover_image_url=/img/suggested/epic/header_cyclelengthofUK.jpg">Challenge a friend</a><a href="/challenge/yourself?title=Cycle the length of the uk&amp;cover_image_url=/img/suggested/epic/header_cyclelengthofUK.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/epic/square_swimwithsharks.jpg"><span><p>Swim with sharks</p><a href="/challenge/create?title=swim with sharks&amp;cover_image_url=/img/suggested/epic/header_swimwithsharks.jpg">Challenge a friend</a><a href="/challenge/yourself?title=swim with sharks&amp;cover_image_url=/img/suggested/epic/header_swimwithsharks.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/self-improvement/square_smoking.jpg"><span><p>Stop smoking</p><a href="/challenge/create?title=stop smoking&amp;cover_image_url=/img/suggested/self-improvement/header_smoking.jpg">Challenge a friend</a><a href="/challenge/yourself/challenge/create?title=stop smoking&amp;cover_image_url=/img/suggested/self-improvement/header_smoking.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/changetheworld/square_standforgovernment.jpg"><span><p>Stand for local government</p><a href="/challenge/create?title=stand for local government&amp;cover_image_url=/img/suggested/changetheworld/header_standforgovernment.jpg">Challenge a friend</a><a href="/challenge/yourself?title=stand for local government&amp;cover_image_url=/img/suggested/changetheworld/header_standforgovernment.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/changetheworld/square_adoptcat.jpg"><span><p>Adopt a rescue cat</p><a href="/challenge/create?title=adopt a rescue cat&amp;cover_image_url=/img/suggested/changetheworld/header_adoptcat.jpg">Challenge a friend</a><a href="/challenge/yourself?title=adopt a rescue cat&amp;cover_image_url=/img/suggested/changetheworld/header_adoptcat.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/random/square_shavebeard.jpg"><span><p>Shave your beard</p><a href="/challenge/create?title=shave off your beard&amp;cover_image_url=/img/suggested/random/header_shavebeard.jpg">Challenge a friend</a><a href="/challenge/yourself?title=shave off your beard&amp;cover_image_url=/img/suggested/random/header_shavebeard.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/sporty/square_cheerleading.jpg"><span><p>Join a cheerleading squad</p><a href="/challenge/create?title=Join a cheerleading squad&amp;cover_image_url=/img/suggested/sporty/header_cheerleading_option2.jpg">Challenge a friend</a><a href="/challenge/yourself?title=Join a cheerleading squad&amp;cover_image_url=/img/suggested/sporty/header_cheerleading_option2.jpg">Challenge yourself</a></span></div>
    <div class="idea-block"><img src="/img/suggested/random/square_dressasduck.jpg"><span><p>Go swimming dressed as a duck</p><a href="/challenge/create?title=go swimming dressed as a duck&amp;cover_image_url=/img/suggested/random/header_dressasduck.jpg">Challenge a friend</a><a href="/challenge/yourself?title=go swimming dressed as a duck&amp;cover_image_url=/img/suggested/random/header_dressasduck.jpg">Challenge yourself</a></span></div>
</div>