Динамически настраивать высоту div с переходом по изображению

У меня есть описание изображения, отображаемое на паре. Я перехожу к нему, изменяя значение margin-top. Проблема в том, что я хочу, чтобы он мог взять как можно больше текста, но все еще есть все, что появляется над изображением.Динамически настраивать высоту div с переходом по изображению

Адрес demo JsBin.

.myslider{ 
 
    overflow:hidden; 
 
    position: relative; 
 
    max-width:400px; 
 
} 
 

 
.myslider img{ 
 
width:100%; 
 
    
 
} 
 

 
.title{ 
 
    position:absolute; 
 
    width: 100%; 
 
    height:20px; 
 
    padding-bottom: 2px; 
 
    margin-top: -20px; 
 
    transition: margin-top 200ms ease-in; 
 
    
 
    background:black; 
 
    opacity:0.6; 
 
} 
 

 
.title-text{ 
 
    color:white; 
 
    float left; 
 
    padding-left:5px; 
 
    
 
} 
 

 
.nav-buttons{ 
 
background: white; 
 
float:right; 
 
padding: 0px 5px 0px 5px; 
 
border: 1px solid black; 
 
margin: 0px 5px 0px 0px; 
 
cursor:pointer; 
 
} 
 

 
.myslider:hover .title{ 
 
    margin-top: 0px 
 
} 
 

 
.description { 
 
    text-align: center; 
 
    position:absolute; 
 
    width: 100%; 
 

 
    
 
    margin-top:0px; 
 
    transition: margin-top 200ms ease-in; 
 
    color:white; 
 
    background:black; 
 
    opacity: 0.6; 
 

 
} 
 

 
.myslider:hover .description { 
 
    margin-top: -20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="myslider"> 
 
     <div class="title"> 
 
     <span class="title-text">Image 1 </span> 
 
     <span class= "nav-buttons"> > </span> 
 
     <span class= "nav-buttons"> < </span> 
 
     </div> 
 
     <img src="http://placekitten.com/400/400"> 
 
     <div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-09-01 user3064626

Вместо использования margin-top анимировать, использовать transform свойство делать это, используя что-то вроде этого:

.description { 
    text-align: center; 
    position: absolute; 
    width: 100%; 
    transition: transform 200ms ease-in; 
    color: white; 
    background: black; 
    opacity: 0.6; 
} 
.myslider:hover .description { 
    transform: translate(0, -100%); 
}

и там вы идете! Ура!

.myslider { 
 
    overflow: hidden; 
 
    position: relative; 
 
    max-width: 400px; 
 
} 
 
.myslider img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.title { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 20px; 
 
    padding-bottom: 2px; 
 
    margin-top: -20px; 
 
    transition: margin-top 200ms ease-in; 
 
    background: black; 
 
    opacity: 0.6; 
 
} 
 
.title-text { 
 
    color: white; 
 
    float left; 
 
    padding-left: 5px; 
 
} 
 
.nav-buttons { 
 
    background: white; 
 
    float: right; 
 
    padding: 0px 5px 0px 5px; 
 
    border: 1px solid black; 
 
    margin: 0px 5px 0px 0px; 
 
    cursor: pointer; 
 
} 
 
.myslider:hover .title { 
 
    margin-top: 0px 
 
} 
 
.description { 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100%; 
 
    transition: transform 200ms ease-in; 
 
    color: white; 
 
    background: black; 
 
    opacity: 0.6; 
 
} 
 
.myslider:hover .description { 
 
    transform: translate(0, -100%); 
 
}

<div class="myslider"> 
 
    <div class="title"> 
 
    <span class="title-text">Image 1 </span> 
 
    <span class="nav-buttons"> &gt; </span> 
 
    <span class="nav-buttons"> &lt; </span> 
 
    </div> 
 
    <img src="http://placekitten.com/400/400"> 
 
    <div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div> 
 
</div>

сделал также некоторые незначительные изменения:

использовано < и > синтаксис правильный XHTML
Добавлена display: block к изображению, чтобы удалить небольшой пробел ниже изображение.

источник

2016-09-01 17:12:15 kukkuz

@ user3064626 Если вы нашли это полезным, пожалуйста, воздержитесь/отметьте как принято. Благодаря! – kukkuz

Не используйте margin-top. Используйте bottom, чтобы привязать его к нижней части своего родителя.

источник

2016-09-01 16:55:08

не могли бы вы показать пример, пожалуйста. – user3064626

Динамически настраивать высоту div с переходом по изображению

ответ

Смежные вопросы