Hover effect implementation

[SolarGuy8]

Hi!

I want to implement hover effect (same as in SoundCloud). I found Soundcloud-like player in Doc, but hover effect reached using the div and if you will open Browser console, you will see, that it's just rectrange div. I want to implement a hover div with the same form as waveform.

Maybe someone already implement this? If not, then could you help me, how can I change the wave color from point A to point B only. Or how can I get the reference to canvas element (using React.js). Thank you in Advance.

[katspaugh]

This can be done with a div overlay with a filter:

.overlay {
  background: #756752;
  mix-blend-mode: 'plus-lighter';
}

You could extend the Hover plugin with this, it would be a cool addition.

[katspaugh]

Ah yes, sorry, the mix-blend-mode should be on another div that contains the actual overlay.
The overlay background should be rgb(30, 30, 30), i.e. the same the background of the waveform.

[SolarGuy8]

You mean create a parent div for hover? Or div inside the hover?

<div className={classes.root}>
      <div id="waveform">
        <div>
          <div id="hover"></div>
        </div>
      </div>
</div>

and my css

      '& #hover': {
        position: 'absolute',
        left: 0,
        top: 0,
        zIndex: 10,
        pointerEvents: 'none',
        height: '55%',
        width: 0,
        opacity: 0,
        transition: 'opacity 0.2s ease',
        background: 'rgba(28, 28, 28)',
        mixBlendMode: 'plus-lighter',
      },

      '& #waveform': {
        cursor: 'pointer',
        position: 'relative',
      },

      '& #waveform:hover #hover': {
        opacity: 1,
      },

[SolarGuy8]

Maybe I've done wrong, but I still have a troubles (@katspaugh)

    <div className={classes.root}>
      <div id="waveform">
        <div id="hoverWrapper">
          <div id="hover"></div>
        </div>
      </div>
    </div>

and styles:

    root: {
      position: 'relative',

      '& #hoverWrapper': {
        position: 'absolute',
        left: 0,
        top: 0,
        zIndex: 10,
        pointerEvents: 'none',
        height: '55%',
        width: '100%',
        transition: 'opacity 0.2s ease',
        mixBlendMode: 'plus-lighter',
      },

      '& #hover': {
        position: 'absolute',
        left: 0,
        top: 0,
        zIndex: 10,
        pointerEvents: 'all',
        height: '100%',
        width: 0,
        transition: 'opacity 0.2s ease',
        background: 'rgba(28, 28, 28)',
      },

      '& #waveform': {
        cursor: 'pointer',
        position: 'relative',
      },

      '& #waveform:hover #insideHover': {
        opacity: 1,
      },
    },

[SolarGuy8]

Just added z-index to waveform and everything start working :) Thank you!

[katspaugh]

Please feel free to add this functionality to the Hover plugin if you want. Cheers!

[baranowskyi]

I have a gradient background. And I couldn't make it like the example from soundcloud either. The suggested solutions don't work.