React: overflow: hidden with parent as well as child

I am trying to make amazon prime clone(basic). In there I have a div (top-movies) which will contain other movies (It is like row of movies). So I put overflow: hidden with it. But I also want that when i hover over the movie image the div will expand and show the movies name. So I here also put overflow: hidden. But now the overflow of outer div is not working, also i am not able to change the width of inner div.
Here is the code:
HTML: of outer div:

<div className="top-movies"  ref={ref}>
        {movies.map((item) => {
          return <FilmComponent title={item.title} imgsrc={item.imgsrc} />
        })}
      </div>

HTML of inner div:

<div className="film">
                  <img src={imgsrc} width="350px" height="200px"/>
                  <h1>{title}</h1>
            </div>

And here is the CSS:

.top-movies {
    display: flex;
    overflow-y: visible;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.film {
     padding: 0px; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: space-around; 
    width: min-content;
    max-width: 300px;
    border:2px solid red;
    height: 300px;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: auto;
    background-color: #1b2530;
    transition: transform 450ms;
}

So is top-movies a horizontal scroll box?

Instead of using CSS for the title reveal on the child elements maybe you can use React to toggle the title using something like a mouse event and do some conditional rendering?

In any case, it’s very hard to help with just what you have posted. It would help if we can see more of the code (GitHub) or a live example (CodeSandbox).

Yes top-movies is a horizontal scroll-box.
How to use react to toggle the title?
Sorry i am new to it.
Here is the link amazing-shirley-22xko - CodeSandbox.

I’m not sure I understand the point of the overflow CSS on film. What are you trying to have happen to the title? Can you not just transition opacity on it, on hover?

.film-title {
  opacity: 0;
  transition: opacity .4s ease;
}

.film:hover > .film-title {
  opacity: 1;
  transition: opacity .4s ease;
}

As for the React code, I would first suggest you move the FilmComponent component (its definition) out of the Films component. Then all I meant was something like this.

function FilmComponent(props) {
  const { title, imgsrc } = props;
  const [showTitle, setShowTitle] = React.useState(false);

  function handleToggleTitle(event) {
    setShowTitle(state => !state);
  }

  return (
    <div className="film" onMouseEnter={handleToggleTitle} onMouseLeave={handleToggleTitle}>
      <div className="film-image">
        <img src={imgsrc} width="300px" height="200px" alt="movie poster"/>
      </div>
      <div className="film-title">
        {showTitle && <h1>{title}</h1>}
      </div>
    </div>
  );
}

Not sure you need it though, you should be able to just transition the opacity in the CSS. But I might be missing something about the overflow?

I am applying CSS overflow on film, so that when i hover over the film’s image the div expands to reveal the name of the movie. The overflow on external div(top-movies) is to have the scroll feature. I am trying to make a semi-clone of amazon prime videos. But in the app only one of the overflow works.


Here is the app without internal overflow.
And the current app is with it.
Why are the film divs getting compressed or why is the top-movies div not overflowing now?

This is the part I’m not sure I understand. Why do you need the overflow property for this? What do you mean by “expands to reveal the name”?

Basically, you just want the title to be hidden by default and only show on hover, correct? I’m just not sure what the exact effect of the title reveal it is you are going for?


See like in this picture while hovering over the movie’s picture, the div expands and reveals the name of the movie. I want to implement this and also the horizontal scroll box.
But only one of them works.

Sorry, still not sure why you need the overflow on the children. In fact, that looks more like you need to remove the overflow on the parent container when you hover the child. Otherwise, you will not have the film component breaking out of the parent container like it is in the picture.

I don’t have this service so I don’t know what the actual transition looks like. I have seen some clones though and it seems more like that the hovercard is a separate component that gets replaced in on hover (conditionally rendered).

Example:

No worries thanks a lot for the help. :slightly_smiling_face:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.