名前の画像にオーバーレイする

Question

いくつかの画像にオーバーレイを加えようとしています。私は非常に多くの方法で試してみました。オーバーレイは上または下に移動しますが、上には移動しません。どんな助けも素晴らしいだろう！ここで

私のコードです：

.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

私はいくつかの要素とスタイル、絶対にその.boxポジションを追加しています。

.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

混乱であなたの質問が、私はあなたが
ホバー画像上のテキストや別の画像を表示したい理解と同じくらいここにコードがあります：
もし私に何を意味するものではない。

\t .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>