부모 div의 하단에 div를 설정합니다.

div (마우스 오버) 이미지가 맴핑시에 겹쳐지기 때문에 지금까지 완벽하게 작동합니다. 해당 div 안에는 텍스트 (제목)와 다른 div (세부 정보)가 있습니다. .hover div의 높이가 가변적이므로 상위 div (.hover)의 맨 아래에 details div을 넣고 상단에 제목을 넣어야합니다.부모 div의 하단에 div를 설정합니다.

<div class="grid-item"> 
     <img class="Movieimg" src="img.jpg"> 

     <div class="hover"> 
      <div class="title">The title</div> 

      <div class="details pull-right"> 
       <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details"> 
        <i class="fa fa-eye" aria-hidden="true"></i> 
       </a> 
       <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB"> 
        <i class="fa fa-download" aria-hidden="true"></i> 
       </a> 
      </div> 
     </div> 
    </div>

그리고 현재 CSS이 하나있다 : 나는 그래서 아마 이것을 달성 할 수있는 클래스가있다, 부트 스트랩 3을 사용하고, 또한

.grid-item img{ 
     width:150px; 
    } 
.grid-item { 
     position:relative; 
} 
img:hover{ 
     cursor: pointer; 
     cursor: hand; 
     filter:blur(5px); 
     -moz-box-shadow: 0 0 10px #ccc; 
     -webkit-box-shadow: 0 0 10px #ccc; 
     box-shadow: 0 0 10px #ccc; 
} 

.grid-item .hover { 
     display:none; 
     position:absolute; 
     bottom:0; 
     width: 100%; 
} 

.details a{ 
     margin-bottom: 5px; 
     margin-top: 80%; 
} 

.grid-item:hover .hover { 
    display:block; 
    height: 100%; 
} 
.title{ 
    text-align:center; 
    width:calc(100% - 10px); 
    position:absolute; 
    left:5px; 
}

다음은 HTML 구조는?

출처

2017-02-10 Sredny M Casanova

귀하의 코드는 ['하지 complete'] (HTTPS입니다 : // jsfiddle. net/websiter/tmo110w2 /). [mcve]를 입력하십시오. –

귀하의 질문에 분명히 나에게 명확한 것은 아니지만 이것이 귀하가 달성하지 못하는 것이라고 생각합니다. 방금 붓 스트랩 그리드 레이아웃을 사용하여 적절한 그리드 구조를 얻었습니다. 나는 당신의 CSS 중 일부가 불필요하다는 것을 발견했다. 그래서이 블럭을 제거하면 CSS를 사용하지 않고 원하는 효과를 얻을 수 있기 때문에 부트 스트랩 그리드 시스템만으로 충분하다. 코드를 작동

제거 된 CSS 블록

.title{ 
text-align:center; 
width:calc(100% - 10px); 
position:absolute; 
left:5px; 
} 

margin-top: 80%; 
.grid-item img{ 
    width:150px;// inserted class="img-responsive in place of it 
}

.grid-item { 
 
     position:relative; 
 
} 
 
img:hover{ 
 
     cursor: pointer; 
 
     cursor: hand; 
 
     filter:blur(5px); 
 
     -moz-box-shadow: 0 0 10px #ccc; 
 
     -webkit-box-shadow: 0 0 10px #ccc; 
 
     box-shadow: 0 0 10px #ccc; 
 
} 
 

 
.grid-item .hover { 
 
     display:none; 
 
     position:absolute; 
 
     bottom:0; 
 
} 
 

 
.details a{ 
 
     margin-bottom: 5px; 
 
} 
 

 
.grid-item:hover .hover { 
 
    display:block; 
 
    height: 100%; 
 
} 
 
/*.title{ 
 
    text-align:center; 
 
    width:calc(100% - 10px); 
 
    position:absolute; 
 
    left:5px; 
 
}*/

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
      </head> 
 
      <body> 
 
      <div class="container-fluid"> 
 
      <div class="grid-item"> 
 
      <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
     <img class="Movieimg img-responsive" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg"> 
 
     </div> 
 

 
     <div class="hover col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-9 col-xs-offset-3"> 
 
     <div class="row"> 
 
      <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <div class="title">The title</div> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
       <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details"> 
 
        <i class="fa fa-eye" aria-hidden="true"></i> 
 
       </a> 
 
       <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB"> 
 
        <i class="fa fa-download" aria-hidden="true"></i> 
 
       </a> 
 
      </div> 
 
      </div> 
 
</div> 
 
</div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html>

출처

2017-02-11 01:15:25 neophyte

부모 div의 하단에 div를 설정합니다.

답변

관련 문제