親divの一番下にdivを設定

div（ホバー）は、ホバリング時に画像が重なっていますが、これまでは完全に機能しています。そのdivの中には、テキスト（タイトル）と別のdiv（詳細）があります。 .hover divの高さは可変で、私はdetails divを親のdiv（.hover）の一番下に、そしてタイトルを一番上に置く必要があります。次のHTML構造である：親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はこの1つである。また、

.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; 
}

、私は、ブートストラップ3を使用していますので、多分これを達成するためのクラスがありますか？

出典

2017-02-10 Sredny M Casanova

あなたのコードは[ 'ないcomplete']（HTTPSで：// jsfiddle。 net/websiter/tmo110w2 /）。 [mcve]を入力してください。 –

あなたの質問は私には明らかではありませんでしたが、これはあなたが達成したくないものだと思います。私はちょうど適切なグリッド構造を得るためにブートストラップグリッドレイアウトを使用しました。あなたの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を設定

答えて

関連する問題