Блог

Главная - Вопросы по программированию - Как я могу получить текст при наведении курсора мыши на отзывчивый столбец изображений?

Как я могу получить текст при наведении курсора мыши на отзывчивый столбец изображений?

#html #css #flexbox

#HTML #css — код #гибкий ящик

Вопрос:

У меня есть отзывчивая галерея изображений с сеткой из двух столбцов. Я хочу, чтобы при наведении курсора на каждое изображение отображался текст — по сути, слой непрозрачности над изображением с центрированным текстом посередине. Это то, что я пробовал до сих пор, но текст делает:

 .row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 50px;
}

.column {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}

.column_img {
  padding: 30px; 
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.img_text {
  position: absolute;
  background: rgba(185, 90, 90, 0.85);
  color: #222529;
  visibility: hidden;
  opacity: 0; 
 <div class="row"> 
    <div class="column">
            <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
            <p class="img_text">Image 01</p>
            <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
            <p class="img_text">Image 02</p>

    </div>  
    <div class="column">
            <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
            <p class="img_text">Image 03</p>
            <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
            <p class="img_text">Image 04</p>
    </div> 
</div>

Комментарии:

1. Вам нужно поддерживать (определенную версию) IE? Просто судите на основе -ms-flex свойств, которые у вас есть здесь.

Ответ №1:

Вам нужно перенести изображение и текст в родительский div, чтобы получить возможность использовать его для hover состояния. Ваш css также нуждается в некоторых изменениях. Это ваш желаемый результат?

 .row {
  display: -ms-flexbox; 
  display: flex;
  flex-direction:column;
}

.column {
  display:flex;
  width:100%;
  flex-direction:row;
  justify-content: space-between;
}

.wrapper {
  position:relative;
  width: 50%;
}
.wrapper:hover .img_text {
  visibility:visible;
  opacity:1;
}

.img_text {
  position: absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(185, 90, 90, 0.85);
  color: #222529;
  visibility: hidden;
  opacity: 0;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  text-align:center;
 }

@media screen and (max-width: 1000px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
} 
 <div class="row"> 
    <div class="column">
      <div class="wrapper">
        <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
         <div class="img_text"><p>Image 01 </p></div>
      </div>
      <div class="wrapper">
        <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
         <div class="img_text"><p>Image 02 </p></div>
      </div>

    </div>  
    <div class="column">
        <div class="wrapper">
        <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
         <div class="img_text"><p>Image 03 </p></div>
      </div>
       <div class="wrapper">
        <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
          <div class="img_text"><p>Image 04 </p></div>
      </div>
    </div> 
</div>

Ответ №2:

Как сказал Аристидис, сначала ваш HTML нуждается в некоторых изменениях. Если вы собираетесь использовать «перенос», вам не нужно создавать строки и столбцы.. просто создайте родительский div для каждого изображения и текста. make тоже гибкий, поэтому вы можете центрировать все.

 .flex-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  margin: 50px;
}
.image-column {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 45%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  .image-column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
.img_text {
  position: absolute;
  z-index: 1;
  background: rgba(185, 90, 90, 0.85);
  color: #222529;
  font-size: 24px;
  padding: 10px;
  display: none;
}

.image-column:hover > .img_text {
  display: inline-block;
} 
 <div class="flex-container">
  <div class="image-column">
    <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
    <p class="img_text">Image 01</p>
  </div>

  <div class="image-column">
    <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
    <p class="img_text">Image 02</p>
  </div>

  <div class="image-column">
    <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
    <p class="img_text">Image 03</p>
  </div>

  <div class="image-column">
    <img class="column_img" src="https://via.placeholder.com/50" style="width:100%">
    <p class="img_text">Image 04</p>
  </div>

</div>