How to hide text when a div translates over it on hover?

Question

My preview div items are scaling on hover. What I want is to turn the opacity for title to zero when the first child is hovered upon. Is there any easy way to do this?

Right now it looks like this - https://i.ibb.co/mF64DdR/Screenshot-28.png

<div className="collection-preview">
<h1 className="title">{title.toUpperCase()}</h1>
  <div className="preview"> 
  {     
        movies
        ? (movieData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  {
        tvshow
        ? (tvData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  </div>
    </div>

Answer 1

You could try something like:

let title = document.querySelector('.title');
let preview = document.querySelector('.preview');
preview.addEventListener('mouseover', function(){
   title.setAttribute("style", "opacity:0;")
})

However, I would add a class to each CollectionItem so you could add the eventListener to each preview item instead of the parent.

If you are using react hooks you could also use useHover. https://usehooks.com/useHover/

Answer 2

You can just use CSS to hide any text on hover

.title:hover{
   display: none;
}