How can I make a block of text appear with ease when hovering over an image of a tree? The current setup works, but the transition effect is not as smooth as I want it to be:
HTML:
<p id="hover-text1" class="hover-text1"> Accomplished! </p>
<img id="tree_image1" class="tree_image1" src="/Tree-red.png">
CSS:
.hover-text1 {
display: none;
transition: .5s all ease;
}
.tree_image1:hover {
opacity: 0.3;
}
JS (included in the head section of my HTML file):
<script type="text/javascript">
$(document).ready(function(){
$('#tree_image1').mouseenter(function(){
$('#hover-text1').css({'display':'block'});
});
$('#tree_image1').mouseleave(function(){
$('#hover-text1').css({'display':'none'});
});
});
</script>
Currently, the block of text hover-text1 appears when hovering over tree_image1, and disappears when moving away from it. However, I am struggling to achieve a smooth 0.5-second transition effect. Any suggestions or solutions would be greatly appreciated!
It may also be relevant to note that I am using a local server running Node.js, EJS, and Express.