Наложение на адаптивное изображение

Так что это убивает меня.

Я просмотрел множество форумов, но я не могу найти никаких решений для работы.

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

Обычно у меня просто фиксированный макет с полем наложения того же размера, что и каждое изображение, и текстовым контейнером той же ширины, который включается и выключается при наведении курсора, и это нормально. НО - это моя первая адаптивная версия сайта и я понятия не имею, как сделать так, чтобы размер оверлея и текста соответствовал размерам их родителя.

Я попытался обернуть их все в div, но дочерние элементы, похоже, все равно игнорируют размеры родителей - предположительно, потому, что они плавающие.

Я использую галерею fancybox, рассматриваемое миниатюрное изображение помечено комментарием, но в остальном это работает отлично.

Есть ли способ указать одному div, чтобы он соответствовал ширине другого отзывчивого img? Любая помощь приветствуется.

Вот мой html

<div class="flex_one">

   <div class="blackbox"><!--black low opacity box - appears on hover--></div>

   <div class="textcontainer"><h2>ART</h2></div> 

   <a class="fancybox-thumb" rel="gallery2" href="image1.jpg"><!--gallery image 1-->

   <img class="icon-image" src="thumb.jpg"  alt="main icon" /><!--This is the thumbnail image on page-->
</a>

   <a class="fancybox-thumb" rel="gallery2" href="image2.jpg"><!--gallery image 2-->
 </a>

Это мой CSS

.flex_one {
    width:28%;
    height:auto;    
    float:left;
    background-color:#000;
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .icon-image {
        width:100%;
        height:auto;
    }

    .blackbox {
        height:???;
        width:??;
        overflow:auto;
        opacity:0;
        background-color:#000;
        position: absolute;
        pointer-events:none;    
    }

    .textcontainer {
        width:??;
        margin-top:0px;
        height: 20px;
        background-color:rgba(0,0,0,0);
        pointer-events:none;
        position:absolute;
        background-color:transparent;
    }

    .textcontainer h2{
        text-decoration: none;
        font-size: 13px;
        font-family: 'Raleway', sans-serif; text-transform: uppercase;
        color:#FFF;
        z-index:80000;
        opacity:0;
        transform:scale(0);
    }

.flex_one:hover > .textcontainer h2 {
    transform:scale(1);
    opacity:1;
}

.flex_one:hover > .blackbox {
    opacity:.7;
}

javascript jquery responsive-design responsive-images css-float
person Mr Toad    schedule 02.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы получить размер родителя, вы можете использовать пустой.png, прозрачное изображение того же уровня, высоту и ширину которого вы установили на 100%.

В противном случае вы можете использовать jQuery следующим образом:

$(document).ready(function(){
   $('.blackbox').each(function(){
        $(this).css({
           "height" : $(this).parent('flex_one').outerHeight(); 
           /* or height, outerHeight(true) */
           "width" : $(this).parent('flex_one').outerWidth();
           /* or width, outerWidth(true) */   
        });
   });
});
person myolli4    schedule 02.09.2015
comment
Я не совсем понимаю, что вы имеете в виду под пустым.png. Даже если бы он дал мне ширину и высоту, как бы я получил наложение, чтобы имитировать это? Я пробовал jQuery, но получаю синтаксическую ошибку в строке высоты. Большое спасибо за помощь - person Mr Toad; 02.09.2015
comment
Что говорит ошибка? Как я уже сказал, пустой png — это изображение, которое прозрачно. Если вы не можете создать свой собственный поиск через Google, и я уверен, что вы его получите. Установите Ratio пустого png на ширину 100% и, возможно, на auto. Чтобы сделать его масштабируемым. - person myolli4; 02.09.2015
comment
Эй, я понимаю, что такое png и как его сделать, я просто не понимал, как, получив ширину и высоту, я могу сделать так, чтобы дочерний элемент div соответствовал им. Я действительно решил это. дал flex_one относительную позицию, .blackbox - абсолютную позицию со 100% шириной и высотой. - person Mr Toad; 02.09.2015
comment
Хорошо, в настоящее время не понимаю точную проблему, но если она работает :) - person myolli4; 02.09.2015