JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#"><img src="images/galery-border-bottom.png" class="galeria-box-image" id="galeria-box-image-1"></a>
<div class="galeria-box-image-mask displaynone" id="galeria-box-mask-1"></div>
<a href="#"><img src="images/galery-border-top.png" class="galeria-box-image" id="galeria-box-image-2"></a>
<div class="galeria-box-image-mask displaynone" id="galeria-box-mask-2"></div>
<a href="#"><img src="images/galery-border-bottom.png" class="galeria-box-image" id="galeria-box-image-3"></a>
<div class="galeria-box-image-mask displaynone" id="galeria-box-mask-3"></div>
JavaScript
$(function() {
$('#galeria-box-image-1').mouseover(function(e) {
$('#galeria-box-mask-1').toggleClass("displayblock");
}).mouseout(function(e) {
$('#galeria-box-mask-1').toggleClass("displaynone");
});
$('#galeria-box-image-2').mouseover(function(e) {
$('#galeria-box-mask-2').toggleClass("displayblock");
});
$('#galeria-box-image-2').mouseout(function(e) {
$('#galeria-box-mask-2').toggleClass("displaynone");
});
$('#galeria-box-image-3').mouseover(function(e) {
$('#galeria-box-mask-3').toggleClass("displayblock");
console.log("block");
});
$('#galeria-box-image-3').mouseout(function(e) {
console.log("none");
$('#galeria-box-mask-3').toggleClass("displaynone");
});
});