JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="container">
  <div class="hoverbild" data-hoveraudio>
    <img src="https://pixelbart.de/wp-content/uploads/2020/12/photo-1492684223066-81342ee5ff30.jpg">
    <audio><source src="https://pixelbart.de/wp-content/uploads/2020/12/Jefferson_Airplane_-_Somebody_to_Love_Choco_Criminals_Remix-online-audio-converter.com_.mp3"></audio>
  </div>
</div>

CSS

body {
  background-color: #36393F;
}

.container {
  display: block;
  max-width: 600px;
  margin: 5% auto;
}

.hoverbild img {
  display: block;
  width: 450px;
  height: auto;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .5);
  filter: grayscale(1);
  transition: 0.5s;
}

.hoverbild:hover img {
  filter: grayscale(0);
}

JavaScript

(function($) {
	"use strict";
  
  const WegerlHoverAudio = {
  	init: function() {
    	this.initHoverAudio();
    },
    initHoverAudio: function() {
    	if ( !$("[data-hoveraudio]").length) {
      	return;
      }
      			
      $("[data-hoveraudio]").hover(function() {
      	$(this).find("audio")[0].play();
      });
    },
  };
  
  $(function() {
  	WegerlHoverAudio.init();
  });
  
})(jQuery);