위치 형제 요소 (부모가 고정 된 높이가 없습니다)

그래서 내가

& 제목 데이터베이스에서 온이 썸네일 (omeka와 함께 사용)이 ATM처럼 보이는 뭔가를 . 내가 원하는 것은 제목의 크기 (제목의 크기에 따라 다름)가 축소판 아래와 같기 때문에 제목이 '오버레이'와 같은 것입니다.

좀 더 완벽하게하기 위해 작은 애니메이션으로 아래쪽에서 들어 오도록 &의 미리보기 이미지 -hover로만 표시하고 싶습니다. 사스 (CSS)와 - - 모든 크기부터 (모두 DOM에서

이 내가이 최선을 처리 할 방법

<?php if (metadata('collection', 'total_items') > 0): ?> 
<?php foreach (loop('items') as $item): ?> 
<div class="col-3 collection-item"> 
    <?php if (metadata('item', 'has thumbnail')): ?> 
    <?php echo link_to_item(item_image('square_thumbnail', array('alt' => $itemTitle))); ?> 
    <p class="collection-item-title"><?php echo $itemTitle; ?></p> 
    <?php endif; ?> 
</div> 
<?php endforeach> 
<?php endif>

에 의해 호출됩니다 내 코드에서

<div class='col-3 collection-item'> 
     <a href="link"><img/></a> 
     <p class="collection-item-title"></p> 
    </div>

처럼 보인다 미리보기 이미지 및 제목)가 다를 수 있습니까?

감사합니다.

출처

2017-10-26 Annelien

body { 
 
} 
 
.thumb-block{ 
 
    margin-bottom: 22px; 
 
} 
 
.team-section figure:nth-of-type(3n+1) { 
 
    clear: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 

 
    <script src="scripts/jquery.min.js"></script> 
 
    <script src="scripts/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
 
    <link type="text/css" rel="stylesheet" href="css/StyleSheet1.css" /> 
 

 
</head> 
 
<body> 
 
    <div class="team-section"> 
 
    <figure class="col-md-4 col-sm-6" > 
 
     <div class="thumb-block"> 
 
      <img src="../images/aa.jpg" style="height:20%; width:100%"> 
 
     </div> 
 
     <figcaption> 
 
      
 
      <p> 
 
       your text here 
 
      </p> 
 
     </figcaption> 
 
    </figure> 
 

 
    <figure class="col-md-4 col-sm-6"> 
 
     <div class="thumb-block"> 
 
      <img src="../images/aa.jpg" style="height:20%; width:100%"> 
 
     </div> 
 
     <figcaption> 
 

 
      <p> 
 
       your text here 
 
      </p> 
 
     </figcaption> 
 
    </figure> 
 

 
    <figure class="col-md-4 col-sm-6"> 
 
     <div class="thumb-block"> 
 
      <img src="../images/aa.jpg" style="height:20%; width:100%"> 
 
     </div> 
 
     <figcaption> 
 

 
      <p> 
 
       your text here 
 
      </p> 
 
     </figcaption> 
 
    </figure> 
 
     </div> 
 
</body> 
 
</html>

내가 제대로 이해 않은 경우

.sync 
 
{ 
 
height:30%; 
 
width:50%; 
 
}

<div class='col-3 collection-item sync'> 
 
     <a href="link"><img/></a> 
 
     <p class="collection-item-title"></p> 
 
    </div>

출처

2017-10-26 08:09:07

이봐, 감사는 응 답의 경우,이 갈 줄 것입니다 :) – Annelien

미안, 한이 모든 내 썸네일 작게했다 ... – Annelien

당신이 원하는 것을 IMG와 제목의 부모 DIV에도 높이와 폭 IMG하고 제공 이것을 달성 할 수있는 해결책은

입니다.

.collection-item { 
    position: relative; 
    overflow:hidden; 
} 
.collection-item-title { 
    padding: 10px; 
    background: rgba(blue, .4); 
    text-align:center; 
    margin:0; 
    position:absolute; 
    bottom: 0; 
    width: 100%; 
    transform:translate(0%, 100%); //move it down by 100% of its _own_ height 
    transition: transform .4s ease-in-out .2s; 
} 
.collection-item:hover .collection-item-title { 
    transform:translate(0%, 0%); //move it back up 
    transition: transform .4s ease-in-out .2s; 
}

https://codepen.io/anon/pen/qPegOq

출처

2017-10-26 09:34:47 Dirk

완벽한, 감사합니다! – Annelien

위치 형제 요소 (부모가 고정 된 높이가 없습니다)

답변

관련 문제