Блог

Главная - Вопросы по программированию - Как мне создать этот эффект наведения на компонент карты?

Как мне создать этот эффект наведения на компонент карты?

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

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

 import React, { Component } from 'react'
import '../styles/Project.css'

class Project extends Component {
  render() {
return (
  <div className="Project-card">
    <img
      className="Project-card-image"
      src={this.props.image}
      alt={this.props.title}
    />
  <div className="display-over">
    <div className="Project-card-libraries">
      {this.props.libraries.map((prop) => (
        <img
          src={prop.image}
          alt={prop.name}
          className="Project-card-library-images"
        />
    ))}
    </div>
 </div>
  </div>
  )
 }
} 
 .Project-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  width: 60%;
  height: 100%;
    border-radius: 1em;
    margin-top: 1em;
    align-self: center;
    border-radius: 15px;
    transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

.display-over {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

.Project-card:hover .display-over {
  opacity: 1;
}

.Project-card-image {
    width: 100%;
  object-fit: cover;
  border-radius: 15px;
  height: 100%;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Пример Я хочу, чтобы красный контейнер был поверх всего зеленого контейнера.
У меня есть это. Я не хочу, чтобы там было пустое пространство, которое является div с classname — display-over.
Мне нужно, чтобы это содержимое отображалось поверх изображения.

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

1. Привет и добро пожаловать в StackOverflow! Не могли бы вы объяснить в своем вопросе, что не работает с вашим кодом, чтобы другие люди могли вам помочь?

2. @ChristopheLeBesnerais Я отредактировал вопрос. У меня есть 2 фотографии, которые, я надеюсь, лучше объясняют, чего я хочу. Если мне все еще нужно добавить дополнительную информацию, пожалуйста, дайте мне знать.

3. @Marius вы хотите, чтобы красное содержимое отображалось при наведении или когда вы хотите, чтобы оно отображалось

4. @PascalNitcheu да. красный контейнер, который я хочу отобразить, когда я наведу курсор на зеленый контейнер. И я также не хочу, чтобы это пустое пространство отображалось.

5. @Marius Что вы хотите иметь на белом месте, когда пользователь не зависает? Также в вашей форме вы используете компонент кнопки для функции создания учетной записи или формы?