I searched all over for this and I found a couple of solutions, but I cannot get this to work in my application. What I am trying to do is to get a black-overlay over an image when hovered over and then text to appear. Ideally I want the text to have a border that looks like a button.

I want this to work with my scale on hover as well. For some reason on my actual page, when hovering over an image, it does nothing but scale. It doesn't turn the parent div the gray color. 

What am I doing wrong?

```js
$('.home-img-block').find('img').each(function() {
   var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
   console.log(imgClass);
   $(this).addClass(imgClass);
 });
```

```css
#home-img-blocks {
 width: 100%;
 height: 600px;
}

.home-img-block {
 width: 33.33%;
 /*height: 100%;*/
 display: inline-block;
 overflow: hidden;
 cursor: pointer;
}
.home-img-block:after {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
    opacity:1;
}
.home-img-block img{
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.home-img-block:hover img{
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
 background: rgba(0,0,0,0.3);
 width: 33.33%;
 max-height: 100%;
}
.home-img-block img.wide {
 max-width: 100%;
    max-height: 100%;
 height: auto;
}
.home-img-block img.tall {
 max-width: 100%;
    max-height: 100%;
 width: auto;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
 <div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
   </div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
```