Оверлей изображения на изображениях с откликом. Загрузочный файл

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

В любом случае, я могу это исправить?

Я воссоздал вопрос здесь для облегчения понимания: http://jsfiddle.net/r8rFc/

Вот мой HTML:

<div class="row"> 

    <div class="col-xs-12 col-sm-6 col-md-3 project"> 
     <a href="#"> 
      <div> 
       <img src="http://placehold.it/500x500" class="img-responsive"/> 
       <div class="fa fa-plus project-overlay"></div> 
      </div> 
      <div style="text-align:center;"> 
       <h3>Project name</h3> 
       <p>Image description</p> 
      </div> 
     </a> 
    </div> 

</div>

И мой CSS:

.project-overlay { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(41,128,185,0.9); 
    color: #fff; 
    padding: 50%; 
}

Заранее спасибо!

источник

2014-01-21 RGilkes

Добавьте класс вмещающего DIV, а затем установите следующие CSS на нем:

.img-overlay { 
    position: relative; 
    max-width: 500px; //whatever your max-width should be 
}

position: relative требуется на родительском элементе детей с position: absolute для детей, которые будет расположен по отношению к этому родителю.

DEMO

источник

2014-01-21 16:47:24 brouxhaha

работал отлично! Благодаря!! – RGilkes

Нет проблем. Обратите внимание, что 'max-width' требуется при размерах, где изображения не находятся рядом друг с другом. Без заданной ширины (или максимальной ширины) или 100% изображений наложение выходит за пределы изображения, поскольку по умолчанию деления расширяются до размера их родителей. Вы можете увидеть это, изменив размер области результата скрипта и удалив максимальную ширину. – brouxhaha

Замечательный ...спасибо –

При указании позиции: абсолютная позиционирует себя к следующему по величине элемента с позицией: относительный. В этом случае это div .project.

Если вы дадите непосредственному родительскому div div изображения стиль позиции: относительный, оверлей будет использоваться для этого вместо div, который включает в себя текст. Например: http://jsfiddle.net/7gYUU/1/

<div class="parent"> 
    <img src="http://placehold.it/500x500" class="img-responsive"/> 
    <div class="fa fa-plus project-overlay"></div> 
</div> 

.parent { 
    position: relative; 
}

источник

2014-01-21 16:48:42 Michelle

Работает! Я не могу сделать два ответа, но я поддержал! Спасибо за вашу помощь!! – RGilkes

Если я понимаю ваш вопрос, который вы хотите иметь наложение только на изображение и не охватывают все?

Я установил родительский DIV (i, переименованный в содержании в jsfiddle) в положение относительно, так как наложение должно быть расположено относительно этого div, а не окна.

.content 
{ 
    position: relative; 
}

Я некоторый Покинг вокруг и обновляются ваша скрипка, чтобы просто покрышка размера в IMG которых (я думаю), что вы хотите, дай мне знать, так или иначе :) http://jsfiddle.net/b9Vyw/

источник

2014-01-21 16:57:33 ottis

Я был немного проблемы с тем, чтобы это работало. Используя ответ brouxhaha, я получил 90% от того, что искал. Но корректировка отступов не позволила бы мне помещать текст куда угодно. Использование сверху и слева казалось лучше для моих целей.

.project-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    top: 80%; 
    left: 20%; 
}

http://jsfiddle.net/1rz0b7d8/1/

источник

2016-06-10 20:29:15 radix07

Оверлей изображения на изображениях с откликом. Загрузочный файл

ответ

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