Вёрстка блока текст на картинке при наведении как

@KrisWeb · Регистрация: 15.10.2019

Студворк — интернет-сервис помощи студентам

Всем привет

В общем есть у меня блок, высота которого зависит от ширины, тем самым создавая мне проблему (нельзя задать фикс высоту для анимации и прочего).

Есть блок с бэкграундом картинки. в нём заголовок, текст и кнопки снизу. При загрузке видно только заголовок, при наведении на блок снизу появляется остальная часть, где весь контент. это я сделала. но как мне внутри этого блока прижать кнопки к низу? что-то недопонимаю. получается есть заголовок. подзаголовок. кнопки. как сделать так, чтобы подзаголовок занимал всю свободную высоту, тем самым прижимая кнопки под ним к низу?

Посмотрите пример https://codepen.io/Kris4Web/pen/mddMvBK

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="container">
  <div class="row">
    <!--col-->
    <div class="col-6">
      <div class="ratio-inner ratio-16-9 bg-danger">
        <div class="ratio-content">
          <!--inner-content-->
          <div class="inner-content">
            <div class="title">Заголовок</div>
            <div class="subtitle">Здесь какой-то текст который должен занимать всю свободную высоту, тем самым прижимать нижний элемент к краю. Здесь какой-то текст который должен занимать всю свободную высоту, тем самым прижимать нижний элемент к краю. Здесь какой-то текст который должен занимать всю свободную высоту, тем самым прижимать нижний элемент к краю.</div>
            <!--bottom-->
            <div class="bottom-box">
              <div class="cont">
                <div class="status">Статус: online<br>Человек: 100</div>
                <div class="link"><a href="#">Подробнее</a></div>
              </div>
            </div>
            <!--./bottom-->
          </div>
          <!--./inner-content-->
        </div>
      </div>
    </div>
    <!--./col-->
    <!--col-->
    <div class="col-6">
      <div class="ratio-inner ratio-16-9 bg-danger">
        <div class="ratio-content">
          <!--inner-content-->
          <div class="inner-content">
            <div class="title">Заголовок</div>
            <div class="subtitle">Здесь какой-то текст который должен занимать всю свободную высоту, тем самым прижимать нижний элемент к краю.</div>
            <!--bottom-->
            <div class="bottom-box">
              <div class="cont">
                <div class="status">Статус: online<br>Человек: 100</div>
                <div class="link"><a href="#">Подробнее</a></div>
              </div>
            </div>
            <!--./bottom-->
          </div>
          <!--./inner-content-->
        </div>
      </div>
    </div>
    <!--./col-->
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
.container {
  max-width: 1440px;
}
.ratio-inner {
  position: relative;
  height: 0;
  border: none;
  overflow: hidden;
}
.ratio-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 43.22%,
    rgba(0, 0, 0, 0.66) 70.44%,
    rgba(0, 0, 0, 0.8) 100%
  );
  transition: all 0.3s linear;
}
.ratio-16-9 {
  padding-top: 56.25%;
}
.ratio-4-3 {
  padding-top: 75%;
}
.ratio-5-1 {
  padding-top: 20%;
}
.bg-danger {
  background: #686de0 !important;
  background-size: cover;
  transition: all 0.3s linear;
}
 
.inner-content {
  padding: 30px;
  top: 77%;
  transition: all 0.3s linear;
  position: relative;
}
.ratio-content:hover {
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.3s linear;
}
.ratio-content:hover .inner-content {
  top: 0;
  transition: all 0.3s linear;
}
 
.title {
  font-family: Montserrat;
  font-weight: bold;
  font-size: 28px;
  line-height: 34px;
  color: #ffffff;
  padding-bottom: 20px;
}
.subtitle {
  font-family: Open Sans;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  padding-bottom: 30px;
  overflow: hidden;
}
.bottom-box {
  display: block;
  color: #ffffff;
}
.bottom-box .cont {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.bottom-box .cont .tot {
  color: #ffffff;
}
.bottom-box .cont .link {
  font-size: 16px;
  line-height: 24px;
  display: flex;
  color: #ffffff;
}
.bottom-box .cont .link a {
  border: 2px solid #ffffff;
  border-radius: 50px;
  padding: 5px 50px;
  color: #ffffff;
  text-decoration: none;
}
 
.ratio-content{
  display: flex;
  align-items: stretch;
}
 
.inner-content{
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
.bottom-box{
  margin-top: auto;
}

Заранее спасибо за помощь начинающим)

@KrisWeb · 30.10.2019, 10:53 **[ТС]**

неужели никто не знает?(((

Seffin · 30.10.2019, 19:36

может быть так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="imgCard" style="margin: 40px auto; width: 450px;">
<img class="extender" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHZlcnNpb24gPSAiMS4xIiB4bWxucyA9ICJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0ID0gIjUwMHB4IiAgd2lkdGggPSAiNTAwcHgiPg0KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9InNpbHZlciIgLz4NCjwvc3ZnPg==">
<!-- Картинка должна быть квадратной -->
<img class="backgroundImg" src="https://pixy.org/placeholder/5db93c1abf854.jpg" alt="">
<div class="forText">
<h3 class="head">Рыболовы из Швеции поймали русалку!</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nulla, sint! Odio illo, iusto explicabo molestias. Non deleniti ducimus minima commodi dolore assumenda vitae facilis id at!</p>
<p class="text">Beatae totam labore excepturi, pariatur ratione iure dolorem modi, explicabo consectetur nemo repellat, eum neque. Unde itaque incidunt natus et optio.</p>
<div class="footerCard">
<div class="leftCol">
<p>Первая строчка</p>
<p>Вторая строчка</p>
</div>
<div class="rightCol">
<a class="button" href="#">Подробности</a>
</div>
 
</div>
 
</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
* {
  box-sizing: border-box;
}
 
/* 142 */
 
.imgCard{
  position: relative;
  font-family: sans-serif;
  overflow: hidden;
}
 
.extender{
  display: block;
  width: 100%;
  height: auto;
}
 
.backgroundImg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.forText{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: RGBA(250, 250, 250, .7);
  padding: 0 14px;
  transition: top .3s linear;
}
 
.head{
  font-size: 20px;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 0;
}
  
.text{
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
 
.footerCard{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: Gainsboro;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
}
 
.leftCol{
  font-size: 14px;
  
}
 
.leftCol p{
  margin: 5px 0;
}
 
.button{
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  color: black;
}
 
.button:hover{
  background-color: black;
  color: white;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let forText = $('.forText');
let head = $('.head');
 
 
let imgCard_height = $('.imgCard').outerHeight();
let head_height = head.outerHeight();
 
let forText_top = imgCard_height - head_height + 'px';
 
forText.css('top', forText_top);
head.css('padding-top', '15px');
head.css('padding-bottom', '15px');
 
forText.hover(forTextHandlerIn, forTextHandlerOut);
 
function forTextHandlerIn(){
  forText.css('top', '0');
  head.css('padding-top', '30px');
  head.css('padding-bottom', '0');
}
 
function forTextHandlerOut(){
  forText.css('top', forText_top);
  head.css('padding-top', '15px');
  head.css('padding-bottom', '15px');
}

XML
1
2
3
4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" height = "500px"  width = "500px">
<rect x="0" y="0" width="500" height="500" fill="silver" />
</svg>

Добавлено через 3 часа 46 минут
ну или добавить к вашему CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ratio-content{
  display: flex;
  align-items: stretch;
}
 
.inner-content{
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
.bottom-box{
  margin-top: auto;
}

@KrisWeb · 31.10.2019, 12:54 **[ТС]**

Сообщение от Seffin

ну или добавить к вашему CSS

вот это то, что нужно. спасибо уже жмякнула.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@KrisWeb 1 / 1 / 1 Регистрация: 15.10.2019 Сообщений: 54
	30.10.2019, 10:53 [ТС]
	неужели никто не знает?((( 0

Вёрстка блока текст на картинке при наведении как

Решение