Trying to effect parent element by hovering child element

Question

CSS

.tilt-box{
    
    position: relative;
    width: 100%;  
    display: flex;        
    flex-direction: column;
    perspective: 500px;
    transform-style: preserve-3d;
    transform: rotateX(-0deg) rotateY(0deg);  
}
.over:nth-child(4){left:66%;top:0;border: 2px solid red;}
.over:nth-child(4):hover ~ .tilt-box  {
    
    transform:translateZ(50px) rotateX(-20deg) rotateY(20deg);  
    transition: all .6s ease-in-out;
}

HTML

<a className='card-continer' href={props.link}>          
      <div className='tilt-box'> 
          <div className='bar' />
          <div className='card-title'>{props.name}</div>
          <div className='bar-2' />
          <div className='over'/>
          <div className='over'/>
          <div className='over'/>
          <div className='over'/>
          <div className='over'/>
          <div className='over'/>
         
        </div>
     
    </a>

I am tying to effect the parent element (tilt box) by hovering on the child element (over). but it doesn't seem to work. what the issue here?

Trying to effect parent element by hovering child element

0 Answers0