CODEWITHSUNDEEP
javascriptreactjs
user8934737
user8934737

Reputation:

how to transform image on hover in react?

I am working on reactJs.I am using semantic ui react for this.i want to tranform image when hover.My code is:

<Image
    src={data.profile_photo}
    alt={data.name}
    size="massive"
    avatar
    onClick={() => this.handleGallery(this,data.username)}
    onMouseOut={() => alert('out')}
     onMouseOver={() => alert('in')}
  />

I am new to react. I dont know where to set hover property{transform:scale(1.5,1.5)}.

Upvotes: 6

Views: 17710

Answers (2)

Striped
Striped

Reputation: 2547

You can use the component state, this should work. Edited to show you how each image can manage its own hovering.

class ImgWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {hovered: false};
  }

  render() {
    return (
      <Image
        src={this.props.data.profile_photo}
        alt={this.props.data.name}
        size="massive"
        avatar
        onClick={() => this.props.handleGallery(this.props.data.username)}
        onMouseOut={() => this.setState({hovered: true})}
        onMouseOver={() => this.setState({hovered: false})}
        style={{transform: `${this.state.hovered ? 'scale(1.5,1.5)' : null}`}}
      />
    );
  }
}

class MyOtherComponent extends Component {
  ....

  render() {
    return (
      ...
      <ImageWrapper data={...}/>
    );
  }
}

Upvotes: 6

Felipe Micali
Felipe Micali

Reputation: 857

Why don't you use simple css selectors for this? In scss this could be done like:

.my-class {
    transform:scale(1, 1);
    transition: 1s;

    &:hover {
        transform:scale(1.5, 1.5);
    }
}

Upvotes: 4

Related Questions