Overlay on an image with a name - image

Question

I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>