Text erscheint über dem Bild, wenn es nur bei Hover angezeigt werden soll

Question

Ich versuche einen Effekt mit jQuery zu erstellen. Wenn der Benutzer über ein Bild fährt, erscheint ein Textteil über dem Bild. Es gibt jedoch einige Probleme beim Ändern des Codes.

1. Wenn die „.img“ in Zeile 3 des jQuery mit ‚img‘ ersetzt wird, funktioniert der Code in Ordnung, aber bewirkt, dass der Hover-Effekt auf einem anderen Bild

2. Wenn ich zur Arbeit zu entfernen das Semikolon nach "Opazität: 0,75;" vorübergehend auf Zeile 4 der jQuery, funktioniert der Code, aber alle anderen Interaktionen mit der Seite bewirkt, dass die Wirkung

Apologies für den Code brechen ein bisschen langatmig zu sein.

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

Mein 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

Für jeden, der dies liest gelöst werden kann, fand ich, dass das Etikett umgebenden Das Bild im workDisplay-div verursachte das Problem, da beim Entfernen dieses Tags aus meinem Code der Hover-Effekt perfekt funktionierte.

HTML Bevor:

<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 Nach:

<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

Mit JQuery können Bilder vom Bildelement $("img") oder nach Klasse oder ID eines Bildes $(".imageclass") bzw. $("#imageid") ausgewählt werden.

In Ihrem Fall können Sie den Bildern, die Sie mit der Funktion JQuery animate auswählen möchten, zusätzliche Klassen zur Verfügung stellen. Dann betrifft die Funktion nur die Bilder, die nur diese Klasse haben. Hoffe das macht es klar.

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

Answer 3

Versuchen Sie nicht JS zu verwenden
, wenn es später von 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); 
 
\t 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); 
 
\t 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>