在悬停时为图像添加颜色叠加

Question

我正在为我正在处理的网页制作演示：https://jsfiddle.net/adh99rp4/。

有没有办法让绿色叠加层显示在图像上而不是其他区域？

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.content-block-inner {
    background: rgba(2, 79, 29, 0.8);
    color: white;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.content-block-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 300px;
}

article:hover .content-block-inner {
    opacity: 1;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="row">

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

<article class="post type-post status-publish format-standard has-post-thumbnail hentry category-interiors" >

		<div class="entry-image">
			<div class="image-placeholder lazy-load">
				<div class="image-placeholder-container">
				  <img src="http://placehold.it/480x480" class="lazy-load">
				</div>
			</div>	
		</div>

		<div class="content-block-inner">

			<div class="content-block-text">

				<header class="entry-header">

					  <h3 class="entry-title">
						<a href="#" rel="bookmark">Header Text</a>
					</h3>
					<div class="entry-subtitle date">
						<a href="#" rel="bookmark">
							<time class="entry-date published" datetime="">Tuesday 29th December 2015</time>
						</a>				
					</div>
					
				</header>

				<div class="hr"></div>

			</div>

		</div>

	</article>

</div>

</div>

</div>