TalonHughes TalonHughes - 2 months ago 5
CSS Question

Overlay on an image with a name

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!

this is how my code is turning out

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

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>