Блог

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

Как создать div, в котором по умолчанию отображается картинка, но при наведении на нее переходят к некоторым деталям текста?

#css #hover #css-transitions

#css #наведите #css-переходы

Вопрос:

Я хочу создать div. Это 300 x 300 пикселей. По умолчанию в нем есть изображение. Но при наведении на него курсора он переходит к текстовому описанию. Также должен быть переходный период в 0,2 секунды.

Я не мог понять, как это сделать. Пожалуйста, помогите.

 main, .front, .back {
height:300px;
width:300px;
}

.back{
display:none;
}

.front:hover .back {
display:block;
} 
 <div class="main"> 
  
  <div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  </div>
  
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
  </div>
  
</div>

Ответ №1:

 .front,
.back {
  height: 300px;
  width: 300px;
  transition: 0.2s;
}

.back {
  transform: translateY(-80%);
  opacity: 0;
}

.front:hover .back {
  opacity: 100;
} 
 <div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description </p>
  </div>
</div>

Это сработает!

Если вы хотите скрыть изображение, то:

 .front,
.back {
  height: 300px;
  width: 300px;
  transition: 0.2s;
}

#image {
  transition: 0.2s;
}

.back {
  transform: translateY(-80%);
  opacity: 0;
}

.front:hover .back {
  opacity: 100;
}

.front:hover #image {
  opacity: 0;
} 
 <div class="front">
  <img id="image" src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description </p>
  </div>
</div>

Ответ №2:

Вы можете использовать этот код

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main, .front, .back {
  height:300px;
  width:300px;
  position: relative;
}

.back{    
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 6em 1em;
  text-align: center;
  top: -100%;
  right: 0;
  color: #fff;
  background-color: #333333;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
} 

.main:hover .back {
    display: block;
    top: 0%;
} 
 <div class="main"> 
  
  <div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  </div>
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description blah blah blah blah blah blah blah blah blah  </p>
  </div>
  
</div>

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

1. проблема, с которой я столкнулся, заключается в том, что содержимое в классе «back» не является невидимым, когда область не наведена. он находится над ним.