覆蓋名稱的圖像

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>