Вопрос по html, responsive-design, css, twitter-bootstrap-3 – Наложение изображений на загрузочные изображения адаптивных размеров

17

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

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

Я воссоздал проблему здесь для облегчения понимания: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%;
}

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

Ваш Ответ

5   ответов
33

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

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

DEMO

Чудесно, спасибо Pierpaolo Cira
Работал отлично! Спасибо!! RGilkes
Наложенный текст, кажется, не центрирован. Ralph David Abernathy
Не работает в Firefox 34. Milan Babuškov
Нет проблем. Обратите вниманиеmax-width требуется в размерах, где изображения не находятся рядом друг с другом. Без заданной ширины (или максимальной ширины) или 100% изображений наложение выходит за пределы изображения, поскольку элементы div по умолчанию распространяются на размер их родителей. Вы можете увидеть это, изменив размер области результатов скрипта и удалив максимальную ширину. brouxhaha
0

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

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

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

3

absolute, он позиционирует себя на следующем наивысшем элементе с position :lative. В данном случае это .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;
}
Работает! Я не могу сделать два ответа, но я проголосовал! Спасибо за вашу помощь!! RGilkes
0
<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here
2

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

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

.content
{
  position: relative;
}

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

Похожие вопросы