javascript - Getting a black overlay with text when hovering over an image -

i searched on , found couple of solutions, cannot work in application. trying black-overlay on image when hovered on , text appear. ideally want text have border looks button.

i want work scale on hover well. reason on actual page, when hovering on image, nothing scale. doesn't turn parent div gray color.

what doing wrong?

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

#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: 0.5s;      -webkit-transition: 0.5s;  }  .home-img-block:hover:after {      opacity:1;  }  .home-img-block img{      -webkit-transition: 1s ease; /* safari , chrome */      -moz-transition: 1s ease; /* firefox */      -ms-transition: 1s ease; /* ie 9 */      -o-transition: 1s ease; /* opera */      transition: 1s ease;  }  .home-img-block:hover img{      -webkit-transform:scale(1.25); /* safari , 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;  }

<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>

hope want. check out. added overlay class black overlay.

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

* {    box-sizing: border-box;  }    #home-img-blocks {    width: 100%;    height: 600px;  }    .home-img-block {    width: 33.33%;    float: left;    /*height: 100%;*/    display: inline-block;    overflow: hidden;    cursor: pointer;    position: relative;  }    .home-img-block:hover .overlay {    background: rgba(0, 0, 0, 0.6);    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;  }    .home-img-block:after {    content: attr(data-content);    color: #fff;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    opacity: 0;    transition: 0.5s;    -webkit-transition: 0.5s;    border: 1px solid #fff;    padding: 5px;    text-align: center;  }    .home-img-block:hover:after {    opacity: 1;  }    .home-img-block img {    -webkit-transition: 1s ease;    /* safari , chrome */    -moz-transition: 1s ease;    /* firefox */    -ms-transition: 1s ease;    /* ie 9 */    -o-transition: 1s ease;    /* opera */    transition: 1s ease;  }    .home-img-block:hover img {    -webkit-transform: scale(1.25);    /* safari , 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;    width: 100%;  }    .home-img-block img.tall {    max-width: 100%;    max-height: 100%;    width: auto;  }

<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 class="overlay"></div>    </div>    <div data-content="find out" class="home-img-block">      <img src="http://optimumwebdesigns.com/images/test2.jpg">      <div class="overlay"></div>    </div>    <div data-content="find" class="home-img-block">      <img src="http://optimumwebdesigns.com/images/test3.jpg">      <div class="overlay"></div>    </div>  </div>