[영화 앱] 오버레이 이미지와 글 출력 및 마우스 드래그 스크롤

import React from "react";

const MovieList = (props) => {
  return (
    <>
      {props.movies.map((movie) => (
        <div className="image-container d-flex m-3" key={movie.imdbID}>
          <img src={movie.Poster} alt="영화포스터"></img>
          <div className="overlay d-flex align-items-center justify-content-center">
            <span className="me-2">선호작 추가</span>
            <span>❤️</span>
          </div>
        </div>
      ))}
    </>
  );
};

export default MovieList;

 

 

 

 

App.css

.image-container {
  position: relative;
  transition: transform 0.2s;
}

.image-container:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.image-container:hover .overlay {
  opacity: 1;
}

.overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  bottom: 0;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

 

 

 

 

 

 

 

https://github.com/Norserium/react-indiana-drag-scroll

GitHub - Norserium/react-indiana-drag-scroll: React component which implements scrolling via holding the mouse button or touch

 

 

 

npm i react-indiana-drag-scroll

 

 

 

리스트 출력되는 div태그를 scrollContainer로 바꿔준다. 

 

 

마우스를 좌우로 스크롤해서 화면을 옮길 수 있다