Как мне выровнять элемент div на изображении в ответ на вопрос? - PullRequest
Новая
       8

Как мне выровнять элемент div на изображении в ответ на вопрос?

0 голосов
/ 30 апреля 2020

Я сейчас работаю над своим сайтом портфолио. Мои проекты перечислены в виде кликабельных изображений, расположенных в два столбца. Я хочу, чтобы, когда пользователь наводил курсор на изображение, цветной блок solid покрывал его заголовком проекта в центре. Примерно так: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.

У меня все работало идеально, когда я использовал классы строки / столбца css, но так как я обнаружил, что он не очень отзывчив (включен мобильный, первый столбец накладывается поверх другого, что имеет смысл, но это не тот порядок, который я хочу), вместо этого я выровнял изображения с помощью float и padding. Теперь эффект наведения / ссылка растягивается по всей странице, а не содержится в области изображения.

Вот мой код для справки:

CSS

    .container {
        position: relative;
    }
   .image {
        display: block;
        height: auto;
   }
   .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        height: 100%;
        width: 100%;
       transition: .5s ease;
  }
  .container:hover .overlay {
       opacity: 1;
  }
  .text {
       color: white;
       font-size: 30px;
       font-family: "Lato-Bold";
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
   }
  @media screen and (min-width: 1025px) {
       .image {
           float: left;
           width: 45%;
           padding-left: 40px;
           padding-right: 15px;
           padding-bottom: 30px;
       }
  }

HTML

     <div class = "container">
          <a href = "link"><img src="image name" class = "image"></a>
          <div class="overlay" style = "background-color: #color;">
               <div class="text">project title</div>
          </div>
     </div>

Как это исправить? Я попытался добавить display: block в класс .overlay. Я попытался сделать класс .overlay того же размера, что и изображение. Я также попытался обернуть ссылку вокруг класса контейнера, а не наоборот, как сейчас. Ничего не происходит вообще. Я также пытался настроить размер контейнера, но это сократило изображения и сложило их в 1 столбец: (

1 Ответ

1 голос
/ 30 апреля 2020

Читать о Отзывчивые изображения и Flexbox

Попробуйте следующий код.

Примечание: Я немного изменил структуру HTML. 

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.thumb {
  position: relative;
  width: 50%;
}

.thumb img {
  width: 100%;
}

.thumb:hover .overlay {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  color: #000;
  background: #fff;
}

.overlay .text {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  left: 50%;
  text-align: center;
}
<div class="container">
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
  <a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
    <div class="overlay">
      <div class="text">project title</div>
    </div>
  </a>
</div>
...