I am building a website and wanted to apply an effect on hover for a div element. I know I could do it in css but wanted to write some js/jquery to practice and I could not find a solution for it. Basically, my code looks like that:
HTML:
<a href="" class="somelink">
<img src="someimg">
<p class="sometext">Some Text</p>
</a>
CSS:
.sometext{
position:absolute;
top...,right:0;
display:none;
background-color:black;
}
JS/jQuery:
$(document).ready(() => {
function portfolioItemFadeIn(e) {
let target = $('.portfolio-item-desc')
$(this).find(target).fadeIn();
}
$('.portfolio-item').mouseenter( (e) => portfolioItemFadeIn(e));
});
I wanted the text to cover the image and fadeIn on mouse enter but nothing is happening :( Could someone help me with that?