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

Вот перо для демонстрации текущего состояния: http://codepen.io/anon/pen/JbJgoe

.about__images {
  max-width: 800px;
  margin: 0 auto;
}

.about__inner {
  margin-top: 60px;
}

.about__inner img {
  max-width: 100%;
  margin-right: 20px;
}

.about .about__inner {
  position: relative;
  overflow: hidden;
}

.about .about__inner .about__inner--overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.about .about__inner:hover .about__inner--overlay {
  opacity: 1;
}

<div class="container about">
  <div class="about__images">
    <div class="row">
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
    </div>
  </div>
</div>
0
Smithy 25 Ноя 2016 в 20:06

4 ответа

Лучший ответ

Вы близки к этому. Небольшая модификация структуры и несколько строк в css:

Html:

   <div class="col-md-4">
        <div class="about__inner">
           <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">

           <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>


        </div>

Css:

.about .about__inner .about__inner--overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  transition: opacity .25s ease;
  position: absolute;
  top:0;
  width:100%;
  height:100%;

}
.about__inner{
 position:relative;
}
.about__inner--overlay{
  color:#fff;
}

Codepen: http://codepen.io/swapnaranjitanayak/pen/oYwKLO

1
Swapna 25 Ноя 2016 в 17:26

Вам нужно использовать absolute позиционирование и размер поля. Вы можете использовать координаты, чтобы изменить размер окна так, чтобы он соответствовал любому размеру, поскольку вы уже установили родительский элемент в позиционировании relative ..

.about .about__inner .about__inner--overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  transition: opacity .25s ease;
  top:0;
  left:15px;
  right:15px;
  bottom:0;
  color:white;
  position:absolute
}
.about__images {
  max-width: 800px;
  margin: 0 auto;
}

.about__inner {
  margin-top: 60px;
}

.about__inner img {
  max-width: 100%;
  padding-right: 20px;
}

.about .about__inner {
  position: relative;
  overflow: hidden;
}

.about .about__inner .about__inner--overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  transition: opacity .25s ease;
  top:0;
  left:15px;
  right:35px;
  bottom:0;
  color:white;
  position:absolute
}

.about .about__inner:hover .about__inner--overlay {
  opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container about">
  <div class="about__images">
    <div class="row">
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="" class="hideonhover">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
      <div class="about__inner col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">
        <div class="about__inner--overlay">
          <i class="fa fa-user" aria-hidden="true"></i>
          <p>lorem</p>
        </div>
      </div>
    </div>
  </div>
</div>
1
G-Cyrillus 25 Ноя 2016 в 17:15

Попробуй это:

.about__inner {
  padding: 0px; //for full frame image
}
.about__inner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; //force image display as cover, no scale
}
.about .about__inner .about__inner--overlay {
  position: absolute; //You need it to arrange the div.
  top: 0px;
  left:0px;
  width: 100%;
  height: 100%;
}
1
Davuz 25 Ноя 2016 в 17:18
Try this:


.about__images {
  max-width: 800px;
  margin: 0 auto;
}

.about__inner {
  margin-top: 60px;
}

.about__inner img {
  max-width: 100%;
  margin-right: 20px;
}

.about .about__inner {
  position: relative;
  overflow: hidden;
}

.about .about__inner .about__inner--overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.about .about__inner:hover .about__inner--overlay {
  opacity: 1;
  position: relative;
  height: 185px;
  top: -185px;
}
0
Mallikarjun 25 Ноя 2016 в 17:33