Text appearing over image when it should only appear on hover

Question

I am attempting to create an effect using jQuery, where when the user hovers over an image, a piece of text appears over the image. However, there are a few issues when making changes to the code.

1. If the ".img" on line 3 of the jQuery is replaced with "img", the code works fine, but causes the hover effect to work on a different image

2. If I remove the semicolon after "opacity: 0.75;" on line 4 of the jQuery, the code works temporarily, but any other interactions with the page causes the effect to break

Apologies for the code being a bit long winded.

Working JSFiddle: https://jsfiddle.net/9dsL2jyL/3/

My Code:

HTML

<div class="workInfo">
        <!-- Nav bar open icon -->
        <img src="images/icons/navbar.png" id="hamburger" alt="Navigation Menu" onclick="openNav()">
        <!-- Nav bar links -->
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" alt="Close the Navigation Menu">&times;</a>
            <a href="index.html" class="toplink" alt="Home">Home</a>
            <a href="about.html" alt="About">About</a>
            <a href="portfolio.html" alt="Portfolio">Portfolio</a>
            <a href="#" alt="Contact ">Contact</a>
            <!-- Facebook Link -->
            <a href="#" id="facebook" alt="Facebook Page Link">
                <div class="container">
                    <img src="images/icons/facebookHover.png">
                    <img class="fadeTop" src="images/icons/facebook.png" style="display: block;">
                </div>
            </a>                    
            <!-- Instagram Link -->     
            <a href="#" id="instagram" alt="Instagram Page Link">   
                <div class="container">
                    <img src="images/icons/instagramhover.png">
                    <img class="fadeTop" src="images/icons/instagram.png">
                </div>
            </a>                    
            <!-- Github Link --> 
            <a href="#" id="github" alt="Github Page Link">
                <div class="container">
                    <img src="images/icons/githubhover.png">
                    <img class="fadeTop" src="images/icons/github.png">
                </div>
            </a> 
        </div>
        <h1>Work</h1>
    </div>
    <div class="workDisplay">
        <a href="#">
            <!-- Div to store the text for hover -->                    
            <div id="container">  
                <!-- Text that appears on hover -->
                <h2 class="text">
                    A Play On Words
                </h2>
            </div>  
            <!-- Project image -->
            <img class="img" src="images/cardphoto.jpg">
        </a>
    </div>

CSS

.sidenav {
/* Sets the height to 100% of the page */
height: 100%;
/* Sets the width of the nav bar to 0 */
width: 0;
/* Keeps the nav bar stationary */
position: fixed;
/* Makes the nav bar appear above everything */
z-index: 10;
/* Nav bar Placement stuff */
top: 0;
left: 0;
/* Sets the colour of the nav bar background */
background-color: #141311;
/* Disables horizontal scroll in the nav bar */
overflow-x: hidden;
/* Adds padding above the content */
padding-top: 3%;
/* Adds 0.5 second transition effect to slide in the nav bar */
transition: 0.5s;
}

/* The navigation menu links */
.sidenav a {
/* Sets the font */
font-family: "purista-web",sans-serif;
font-style: normal;
font-weight: 300;
/* Adds padding around the links */
padding: 1vh 1vw 1vh 2vw; 
/* Removes all text decoration */
text-decoration: none;
/* Sets the size of the font */
font-size: 1.75vw;
/* Sets the colour of the font */
color: #B8B8B4;
/* Makes the text appear in a block */
display: block;
/* Adds a 0.3s transition to the hover effect */
transition: 0.3s
}

/* Styling for the social media links */
.container {
position: relative;
width: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}

.container img {
position: absolute;
top: 0;
left: 0;
width: 5vw;
}

/* Changes the colour when you hover over the link */
.sidenav a:hover, .offcanvas a:focus{
color: #FEFEFA;
}

/* Styling for the top link of the nav bar */
.toplink {
margin-top: 10vh;
}

/* Position and style the close button (top right corner) */
.closebtn {
position: absolute;
top: -4.5vh;
font-size: 8vw !important;
}

/* Styling for the left half of the portfolio page */
.workInfo {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
left: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #FEFEFA;
z-index: 5;
}

/* Styling for Work */
.workInfo h1 {
/* Sets the font */
font-family: "marydale",sans-serif;
font-style: normal;
font-weight: 400;
/* Sets the size of the font */
font-size: 8vw;
/* Sets the positioning for the text */
position: fixed;
top: 50%;
left: 50%;
margin-top: -13vh;
margin-left: -34vw;
/* Sets the colour of the type */
color: #141311;
}

.workInfo #hamburger {
width: 3vw;
position: absolute; 
left: 5%; 
top: 5.5%; 
}

/* Styling for the right half of the portfolio page */
.workDisplay {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
background: #141311;
line-height: 100%;
z-index: 4;
display: -moz-flex; 
display: -webkit-flex; 
display: flex;             
flex-direction: column;     
justify-content: center;   
align-items: center;       
}

.workDisplay #container {
/* Keeps the div fixed in one position */
position: fixed;
/* Removes White surrounding boxes */
padding: 0;
margin: 0;
top: 0;
right: 0;
/* Sets the Width and height of the div, and the background colour */
width: 50%;
height: 100%;
}

.workDisplay h2 {
color: #FEFEFA;
/* Sets the typeface */
font-family: "skolar-sans-latin",sans-serif;
/* Makes the font italic */
font-style: italic;
/* Makes the font Bold */
font-weight: 700;
/* Sets the size of the type */
font-size: 3vw;
margin-top: 48vh;
display: -moz-flex; 
display: -webkit-flex; 
display: flex;             
flex-direction: column;     
justify-content: center;   
align-items: center; 
z-index: 14;
}

.workDisplay img {
display: block;
height: 100vh;
min-height: 100vh;
width: auto;
z-index: 10;
}

jQuery

/* Hover effect for the nav bar */
$(window).load(function(){
$(".container").hover(function() {
    //Adds a fade out of 300ms to the top image
    $(this).find(".fadeTop").fadeOut(300);
}, function() {
    //Adds a fade in of 300ms to the top image
    $(this).find(".fadeTop").fadeIn(300);
});
})


/* Hover effect for the span's on the work page */
$(document).ready(function() {
$('.text').hide();
    $('.img').animate({
        opacity: 0.75
    });

    $('.img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
        $('.text').fadeIn();

    }, function() {
        $(this).stop().animate({opacity:1},500)
        $('.text').fadeOut();
    });

Answer 1

For anyone who reads this later, I found that the tag surrounding the image in the workDisplay div was causing the issue, as upon removing this tag from my code, the hover effect worked perfectly.

HTML Before:

<div class="workDisplay">
    <a href="#">
        <!-- Div to store the text for hover -->                    
        <div id="container">  
            <!-- Text that appears on hover -->
            <h2 class="text">
                A Play On Words
            </h2>
        </div>  
        <!-- Project image -->
        <img class="img" src="images/cardphoto.jpg">
    </a>
</div>

HTML After:

<div class="workDisplay">
        <!-- Div to store the text for hover -->                    
        <div id="container">  
            <!-- Text that appears on hover -->
            <h2 class="text">
                A Play On Words
            </h2>
        </div>  
        <!-- Project image -->
        <img class="img" src="images/cardphoto.jpg">
</div>

Answer 2

Try not to use JS
when it can be solved by Css

html,body{
  height: 100%;
  margin: 0;
}

.box{
  width: 100%;
  height: 100%;
  font-size: 0;
}
.box-item{
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 16px;
  position: relative;
}
.box-item:hover .box-item-text{
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}
.box-item:hover .box-item-img{
  opacity: .8;
  -webkit-filter: blur(3px);
	filter: blur(3px);
  // http://caniuse.com/#search=filter%3A%20blur
}
.box-item-text{
  font-size: 30px;
  color: white;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%) scale(.5);
  opacity: 0;
  transition: all 500ms linear;
}
.box-item-img{
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  // or background-size: cover !important;
  background-size: 100% 100% !important;
  -webkit-filter: blur(0px);
	filter: blur(0px);
  transition: all 500ms linear; 
}

<div class="box">
  <div class="box-item">
    <div class="box-item-text">Lorem ipsum.</div>
    <div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
  </div>
  <div class="box-item">
    <div class="box-item-text">Lorem ipsum.</div>
    <div class="box-item-img" style="background: url(http://dummyimage.com/200x200/000/fff) 0 0 no-repeat;"></div>
  </div>
</div>
            

Answer 3

Using JQuery, images can be selected by image element $("img") or by class or id of a image $(".imageclass") and $("#imageid") respectively.

In your case, you can provide additional class to the images you want to select by JQuery animate function. Then the function will only affect the images who have that class only. Hope this makes it clear.

$(".imageclass").animate({ opacity: 0.75; });