Div парение, раскрыть «читать далее» ссылку Переполненной

Question

не была уверена, что лучшим способом титула этого вопроса ... просмотреть codepen в вопросе:

http://codepen.io/LA1CH3/pen/NqPJEx

Я хочу иметь список элементов которые имеют ссылку «читать больше», которая соскальзывает с заголовком при зависании. Я хочу, чтобы все элементы были одинаковой высоты, но все они имеют разные названия.

HTML:

<div class="a"> 
    <img src="http://toronto3d.ca/wp-content/uploads/2011/10/3d-archiitectural-rendering-interior-classic-kitchen.jpg"> 
    <div class="hover"> 
    <h3>The Complete Works of William Shakespeare Bla Bla Overflow</h3> 
    <h4>Link here</h4> 
    </div> 
</div> 

CSS:

.a { 
    background-color: blue; 
    padding: 10px; 
    display: inline-block; 
    transition: 1s; 
    min-height: 250px; 
} 

h3 { 
    width: 100%; 
} 

.hover { 
    display: block; 
    background-color: red; 
    text-align: center; 
    position: relative; 
    height: 60px; 
    overflow: hidden; 
    transition: 1s; 
    width: 290px; 
} 

.b { 
    margin-top: -50px; 
    height: 100px; 
} 

JS:

$(".a").hover(function(e){ 
    e.preventDefault(); 
    $(this).find(".hover").toggleClass("b"); 
}); 

По сути, я хотел бы иметь DIV, который содержит и изображение и заголовок внизу. Когда изображение зависнет, заголовок будет скользить вверх, а из-за переполнения под изображением, вместо заголовка будет отображаться ссылка «читать дальше». У меня вид реализовал это, но это не кажется правильным. Кроме того, если у меня есть длинный заголовок, он отключится от div. Каков хороший способ заставить эту функциональность работать?

Answer 1

Попробуйте с элементами абсолютного позиционирования. Modified codepen

.a { 
    background-color: blue; 
    border: 10px solid blue; 
    display: inline-block; 
    transition: 1s; 
    min-height: 250px; 
    overflow: hidden; 
    position: relative; 
} 

h3, h4 { 
    margin: 10px 0; 
    font-size: 1.2em; 
    line-height: 1.3; 
} 

.hover { 
    display: block; 
    background-color: red; 
    text-align: center; 
    position: absolute; 
    transition: 1s; 
    width: 100%; 
    left: 0; 
    bottom: -2.3em; 
} 

.b { 
    bottom: 0; 
} 

Как @isherwood упоминалось, вы можете omit JavaScript.

Answer 2

ли возился с codepen, чтобы предложить этот

var origPanelText = $.trim($('#title').html()); 

$(".a").hover(function(e){ 
    e.preventDefault(); 
    $(this).find(".hover").toggleClass("b"); 
}); 

$('#title').mouseenter(function(){ 
    var addition = '<a href="#">Read more...</a>'; 
    var panelText = $.trim($('#title').html()).length; 
    var theTitle=$.trim($(this).html()); 
    if (panelText > 30) { 
    var cutString = theTitle.substring(0, 30); 
    $(this).html(cutString+addition); 
    } 
}); 

$('#title').mouseleave(function(){ 
    $('#title').html(origPanelText); 
}); 

Любое использование? EJK