My goal is to implement a jQuery effect that displays text over an image when the user hovers over it. However, I've encountered some issues while modifying the code.
Changing ".img" on line 3 in the jQuery to "img" results in the code working correctly but triggers the hover effect on a different image.
If I remove the semicolon after "opacity: 0.75;" on line 4 in the jQuery, the code works temporarily, but any further interactions with the page cause the effect to malfunction.
I apologize for the lengthy code.
Here is the JSFiddle link to see the code in action: https://jsfiddle.net/9dsL2jyL/3/
Here's my code:
HTML
<div class="workInfo">
<!-- Nav bar icon -->
<img src="images/icons/navbar.png" id="hamburger" alt="Navigation Menu" onclick="openNav()">
... (Remaining HTML code here)
</code></pre>
<p>CSS</p>
<pre><code>.sidenav {
/* CSS styling here */
}
/* More CSS styles below */
.workDisplay img {
/* Additional CSS provided here */
}
jQuery
/* JavaScript code starts here */
$(window).load(function(){
$(".container").hover(function() {
// Code for fade effect
$(this).find(".fadeTop").fadeOut(300);
}, function() {
// Reverses the fade effect
$(this).find(".fadeTop").fadeIn(300);
});
})
// Hover effect implementation
$(document).ready(function() {
$('.text').hide();
$('.img').animate({
opacity: 0.75
});
$('.img').hover(function() {
// Hover animation logic goes here
$(this).stop().animate({opacity:.4},200);
$('.text').fadeIn();
}, function() {
// Mouse out animation logic
$(this).stop().animate({opacity:1},500)
$('.text').fadeOut();
});