Как сделать так, чтобы мое изображение появлялось при наведении курсора после исчезновения со словом «видимость: скрытый»? - PullRequest
Новая
       22

Как сделать так, чтобы мое изображение появлялось при наведении курсора после исчезновения со словом «видимость: скрытый»?

0 голосов
/ 30 июня 2019

Я пытаюсь построить карточную схему, в которой при наведении курсора мыши на обложку фильма отображается некоторая информация. Проблема в том, что моя звезда смайликов не появляется при наведении.

Я использовал этот же visibility: hidden/visible с центром класса, но с center-img он не работает. 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

.container {
  margin: 20px;
  width: 300px;
  height: 424px;
  background-color: black;
  position: relative;
}

.fundo {
  width: 300px;
  height: 424px;
  opacity: 1;
}

.center {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 900;
  font-family: "montserrat", sans-serif;
  background: linear-gradient(to right,#ff8a00,#da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  visibility: hidden;
}

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  visibility: hidden;
}

.fundo:hover {
  transition: .4s ease;
  opacity: 0.5
}

.fundo:hover + .center {
  visibility: visible;
}

.fundo:hover + .center-img {
  visibility: visible;
}

</style>
</head>
<body>
<div class="container">
  <img class="fundo" src="https://www.downgraf.com/wp-content/uploads/2015/06/Classic-Movie-Posters-8.jpg" alt="Cinque Terre">
  <div class="center">10/10</div>
  <img class="center-img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/samsung/161/white-medium-star_2b50.png"> 
</div>
</body>
</html>

Я бы хотел, чтобы эта хреновая звезда появилась снова при наведении, если вы, ребята, можете мне помочь. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 30 июня 2019 
.container {
  margin: 20px;
  width: 300px;
  height: 424px;
  background-color: black;
  position: relative;
}

.hover {
  visibility: hidden
}

.fundo {
  width: 300px;
  height: 424px;
  opacity: 1;
}

.center {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 900;
  font-family: "montserrat", sans-serif;
  background: linear-gradient(to right,#ff8a00,#da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
}

.container:hover .fundo {
  transition: .2s ease;
  opacity: 0.5
}

.container:hover .hover {
  visibility: visible;
}
0 голосов
/ 30 июня 2019

Вы должны переключить свой селектор с .fundo:hover + .center-img на .fundo:hover ~ .center-img, потому что <img class="center-img"> не является прямым братом <img class="fundo">.

Селектор ~ позволит вам выбрать любого брата <img class="fundo">, который имеет класс .center-img.

Использование перехода непрозрачности

CodePen с использованием перехода непрозрачности 

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  opacity: 0; /* Add this */
}

.fundo:hover ~ .center-img { /* Change selector to this */
  transition: 1.2s ease; /* Add this */
  opacity: 1; /* Add this */
}

Использование свойства видимости

CodePen с использованием свойства видимости 

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  visibility: hidden;
}

.fundo:hover ~ .center-img { /* Change selector to this */
  visibility: visible;
}

Устранение эффекта мерцания при наведении курсора на звезду или счет с использованием наложения

Реализация наложения CodePen

Идея состоит в том, чтобы создать невидимое наложение, которое будет покрывать все изображение фильма и применять эффекты наведения на него.

Мерцание происходило в вашем решении, потому что эффекты наведения были размещены на изображении фильма, которое находилось за звездой и показывало по оси z.

Как только ваша мышь зависла над звездой или счетом, эффект видимости по существу переключался, потому что ваша мышь зависала над звездой / счетом вместо изображения фильма.Это привело к тому, что эффекты при наведении на звезду / счет были бы сняты.После того как эффекты были сняты, а их видимость скрыта, вы вернулись к наведению на изображение фильма.Этот цикл создал эффект мерцания. 

.fundo__overlay { /* Created new selector */
  position: absolute; 
  z-index: 999; /* Give the overlay a higher stacking content */
  top: 0;
  left: 0;
  width: 100%; /* Get it to match the movie image's dimensions */
  height: 100%;
  background: black;
  opacity: 0; /* Used for hover transition */
}

/* Transferred hover effects */
.fundo__overlay:hover { /* Changed selector */
  transition: opacity .4s ease;
  opacity: 0.5
}

.fundo__overlay:hover ~ .center { /* Changed selector */
  visibility: visible;
}

.fundo__overlay:hover ~ .center-img { /* Changed selector */
  visibility: visible;
}

<div class="container">
  <div class="fundo__overlay"></div> <!-- Added new element -->
  <img class="fundo" src="https://www.downgraf.com/wp-content/uploads/2015/06/Classic-Movie-Posters-8.jpg" alt="Cinque Terre">
  <div class="center">10/10</div>
  <img class="center-img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/samsung/161/white-medium-star_2b50.png">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...