показать текст внутри div на hover не работает в css - PullRequest
Новая
       17

показать текст внутри div на hover не работает в css

0 голосов
/ 05 ноября 2018 

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: url("assets/images/bg.jpg")no-repeat top;
  background-size: cover;
  background-attachment: fixed;
}

.category-container {
  width: 87%;
  margin: 3em auto;
}

.category-container h2 {
  margin: 2% auto;
  background-color: #fc0321;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 4px #000;
  font-weight: 400;
  padding: 1%;
  width: 15%;
}

.thumb {
  width: 100%;
  height: 47em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

.thumb div {
  position: relative;
}

.thumb div::after {
  content: '';
  position: absolute;
}

.thumb div img {
  width: 36.8em;
  height: 22em;
}

.thumb div h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  font-weight: 400;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity ease-out 250ms;
}

.thumb div:hover .thumb div h3 {
  opacity: 1;
}
<section class="category-container">
  <h2>Category</h2>
  <div class="thumb">
    <div><img src="assets/images/header1.jpg" />
      <h3>Click to open</h3>
    </div>
    <div><img src="assets/images/header2.jpg" />
      <h3>Click to open</h3>
    </div>
    <div><img src="assets/images/header3.jpg" />
      <h3>Click to open</h3>
    </div>
    <div><img src="assets/images/header4.jpeg" />
      <h3>Click to open</h3>
    </div>
  </div>
</section>

Я пытаюсь применить css hover к моему элементу div, который находится внутри div с классом большого пальца. Я хочу сделать прозрачность текста равной 1 при наведении курсора. Но это не работает. Почему это не работает? Пожалуйста, помогите мне в этой проблеме. Может ли кто-нибудь помочь мне в этой проблеме? Есть ли ошибка в моем коде? Если я допустил ошибку, пожалуйста, помогите.

1 Ответ

0 голосов
/ 05 ноября 2018

Я думаю, вы должны изменить на 

    .thumb div h3:hover{
  opacity: 1;
}

Поскольку вы хотите навести курсор на изображение, и текст должен появиться, так что наведение должно быть за "h3". и это стало .thumb div h3:hover

...