Dileet Dileet - 5 months ago 46
CSS Question

React hover animation based on class

I've asked a few questions so far regarding this component and hovering. My next and final question is regarding animation on hover.

I have the default class called .eye-container & and then .eye-container-hover

What is the best way to animate this transition on hover. Here is my Item component:

import React from 'react';
import { Link } from 'react-router';

import Eyecon from '../../static/eye.svg';


class Item extends React.Component {
constructor(props) {
super(props);
this.displayName = 'Item';
this.state = {
hover: false
};
}
mouseOver(){
this.setState({hover: true});
}
mouseOut() {
this.setState({hover: false});
}
render() {
const { item, i } = this.props;
return (
<div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}>
<Link to={`/view/${item.id}`}>
<div className="eye-container">
<img src={Eyecon}/>
</div>
<div className="grid-image">
<img src={item.image} alt="" className="fade-in img"></img>
</div>
<div className="columns">
<div className="column">
<h2>{item.title}</h2>
</div>
<div className="column">
<h3>Type:</h3>
<p>{item.type}</p>
</div>
</div>
</Link>
</div>
)
}
}


export default Item;


This is my "get-to-know-react" project. Hope someone can help.

Answer

What you are trying to achieve can be solved much simpler and cleaner using pure CSS and its :hover pseudo-class: (hit the Run code snippet button)

.blackbox {
  width: 100px;
  height: 100px;
  background: black;
  z-index: 1;
  position: absolute;
}

.blackbox:hover {
  z-index: 3;
  height: 120px;
  width: 120px;
}

.redbox {
  width: 100px;
  height: 100px;
  background: red;
  z-index: 2;
  position: absolute;
  left: 70px;
  top: 70px;
}
<div class='container'>
  <div class='blackbox'></div>
  <div class='redbox'></div>
<div>

Edit: You can also change e.g. the element's siblings using the right CSS selectors:

.blackbox {
  width: 100px;
  height: 100px;
  background: black;
  z-index: 1;
  position: absolute;
}

.blackbox:hover + div {
  z-index: 0;
  height: 120px;
  width: 120px;
}

.redbox {
  width: 100px;
  height: 100px;
  background: red;
  z-index: 2;
  position: absolute;
  left: 70px;
  top: 70px;
}
<div class='container'>
  <div class='blackbox'></div>
  <div class='redbox'></div>
<div>

Comments