Реагирующий блок Hover над отзывчивым изображением

Question

Я использую учебное пособие для создания окна наведения с помощью набора изображений.
Статья находится в here.

Получил это отлично, за исключением того, что мои изображения и зависание реагируют на размер окна (просто по ширине в порядке), я попытался найти, как это сделать. Похоже, что это может быть случай использования%, а не фиксированного значения, но недостаточно опыта, чтобы знать, как выполнить разметку. Даже если я получу изображения, чтобы изменить размер, наведите курсор на него, не изменив их размер.

Можно ли добавить что-то к существующему CSS, чтобы это произошло.

ul.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 0 1em 1em 0; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
}

<ul class="img-list"> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/150x150"> 
 
     <span class="text-content"><span>Text</span></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 1

вы можете использовать только ширину, чтобы сохранить соотношение изображения.

вы можете использовать дисплей: блок для a и img, а также использовать flex для центра текста.

не слишком уверен в том, какое поведение вы ищете, вы можете использовать ширину% на li или сочетание ширины% + min-width и max-width.

пример с% шириной, установленной на 50% (и максимальной/минимальной шириной), может быть любым другим значением и единицами.

ul.img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    margin: 0; 
 
    position: relative; 
 
    width:50%; 
 
    max-width:100vh; 
 
    min-width:60vh; 
 
} 
 
ul.img-list li a, ul.img-list li a img { 
 
    display:block; 
 
    width:100%; 
 
    } 
 
span.text-content { 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display:flex; 
 
    left: 0; 
 
    right:0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 

 
span.text-content span { 
 
    margin:auto; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
    }

<ul class="img-list"> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/150x150"> 
 
     <span class="text-content"><span>Text</span></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

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

.wrapper { 
 
    width: 100%; 
 
    overflow: auto; 
 
    padding: 1%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    border-radius: 8px; 
 
} 
 

 
/* Columns floated left */ 
 
.col-4 { 
 
    width: 33.3%; 
 
    float: left; 
 
    padding: 1%; 
 
    box-sizing: border-box; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
/* Container to make absolute positioning easier on psuedo element */ 
 
.image_container { 
 
    position: relative; 
 
    overflow: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.image_container img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
/* Structure for ::before element */ 
 
#img_1::before, 
 
#img_2::before, 
 
#img_3::before { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    opacity: 0; 
 
    color: white; 
 
    padding: 10px; 
 
    transition: 0.5s ease; 
 
} 
 

 
/* Hover state for container to show ::before on mouseover */ 
 
.image_container:hover#img_1::before, 
 
.image_container:hover#img_2::before, 
 
.image_container:hover#img_3::before { 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 

 
/* Text for ::before elements */ 
 
#img_1::before { 
 
    content: 'Image Title 1'; 
 
} 
 
#img_2::before { 
 
    content: 'Image Title 2'; 
 
} 
 
#img_3::before { 
 
    content: 'Image Title 3'; 
 
}

<div class="wrapper"> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_1"> 
 
     <img src="https://images.unsplash.com/reserve/B6PfiQ8QoSzmsZYOCkSB__DSC0530-1.jpg?dpr=1&auto=format&fit=crop&w=1500&h=1004&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_2"> 
 
     <img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
    <div class="col-4"> 
 
    <div class="image_container" id="img_3"> 
 
     <img src="https://images.unsplash.com/photo-1476362555312-ab9e108a0b7e?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="> 
 
    </div> 
 
    </div> 
 
</div>

Вы также можете установить изображения в качестве background-image для div который даст вам больше контроля над текстом в оверлей, если вам нужен.