Just a recommendation, it is normally better to hide rather than destroy, browsers will thank you.
Why? When you turn display block to none, or none to block, the browser has to destroy the element and render it again. When you just hide it, the browser just has to position it.
HTML
<a href="#"><div class="hover-img">
Show Image
<span><img src="http://placehold.it/150x150" alt="image" height="100" /> </span>
</div></a>
CSS
a .hover-img {
position:relative;
}
a .hover-img span {
position:absolute; left:-9999px; top:-9999px; z-index:9999;
}
a:hover .hover-img span {
top: 20px;
left:0;
}
See it running https://jsfiddle.net/b5Lvq7yL/
On the other hand, given that you want to use javascript in order to make it more reusable and maintainable, I suggest you to combine the idea with some generic CSS and think of it as something you'll probably want to use later for other sections of the software (or other projects)
In fact, you can generalize.
You can have a trigger selector ".onhover-toggle-child-class", which takes its child from "data-target" and toggles the classes in "data-toggle" whenever the mouse enters and leaves..
Using the same HTML you have, but other CSS classes
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Show Image
<span class="absolute target hidden on-top">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">Show Image
<span class="absolute target2 on-top hidden">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
Some super generic CSS.
.on-top {
z-index: 99;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.shown {
display: block;
}
.hidden {
display: none;
}
And some javascript (using jQuery)
$('.onhover-toggle-child-class').on(
'mouseenter mouseleave',
function() {
var element = $(this);
var selector = element.data('target');
var child = element.find(selector);
var classes = element.data('toggle');
child.toggleClass(classes);
}
);
Or, if you would like to use vainilla javascript:
var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
var element = event.srcElement || event.target;
var selector = element.getAttribute('data-target');
var classes = element.getAttribute('data-toggle').split(' ');
var childs = element.querySelectorAll(selector);
//console.log(selector, classes, childs);
childs.forEach(function(child) {
classes.forEach(function(toggleClass) {
if (child.classList.contains(toggleClass))
child.classList.remove(toggleClass);
else
child.classList.add(toggleClass);
});
});
}
elements.forEach(function(element) {
element.addEventListener('mouseenter', onhover);
element.addEventListener('mouseleave', onhover);
});
See both examples working: https://jsfiddle.net/kg22ajm6/
You can create classes that use opacity: 0 and opacity: 1 in order to make the "fadeIn" and "fadeOut". CSS is normally a better choice over raw Javascript or jQuery, jQuery's fadeIn and fadeOut manually animate and CSS transitions are built in within browsers.
Check the example using opacity animation: https://jsfiddle.net/Lwcbn0ae/1/
Regards,
