Text bei Hover ausblenden

Question

Ich kann die Klasse "portfolio_caption" nicht ausblenden, wenn der Hover-Effekt auftritt. Ich bin mir nicht sicher, ob dies daran liegt, dass der Hover-Effekt auf der Deckkraft basiert. Ich bin ein bisschen verloren, wie ich das erreichen kann.

Bitte beachten Sie, dass dies ein reiner CSS-Code ist, aber ich habe nichts dagegen, wenn Sie jQuery/Javascript verwenden.

Hier ist der JSFiddle

.portfolio_bg { 
 
     position: relative; 
 
     width: 50%; 
 
    } 
 
    
 
    .portfolio_image { 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
    } 
 
    
 
    .portfolio_overlay { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
     height: 100%; 
 
     width: 100%; 
 
     opacity: 0; 
 
     transition: .5s ease; 
 
     background-color: rgba(104, 120, 129, 0.5); 
 
    } 
 
    
 
    .portfolio_bg:hover .portfolio_overlay { 
 
     opacity: 1; 
 
    } 
 
    
 
    .portfolio_caption { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    } 
 
    .portfolio_caption:hover { 
 
     opacity: 0; 
 
     display: none; 
 
    } 
 
    
 
    .portfolio_text { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    }

<a href="#"> 
 
    <div class="portfolio_bg"> 
 
     <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="portfolio_image"> 
 
     <div class="portfolio_caption">This is the text that I want to hide when the mouse is hovered but it doesn't go away!</div> 
 
     <div class="portfolio_overlay"> 
 
     <div class="portfolio_text">Hello World and the whole kind of thing goes down!</div> 
 
     </div> 
 
    </div> 
 
    </a>

Answer 1

Verwenden Schweben des Behälters

.portfolio_bg { 
 
     position: relative; 
 
     width: 50%; 
 
    } 
 
    
 
    .portfolio_image { 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
    } 
 
    
 
    .portfolio_overlay { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
     height: 100%; 
 
     width: 100%; 
 
     opacity: 0; 
 
     transition: .5s ease; 
 
     background-color: rgba(104, 120, 129, 0.5); 
 
    } 
 
    
 
    .portfolio_bg:hover .portfolio_overlay { 
 
     opacity: 1; 
 
    } 
 
    
 
    .portfolio_caption { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    } 
 
    .portfolio_bg:hover .portfolio_caption { /*<-- */ 
 
     opacity: 0; 
 
     display: none; 
 
    } 
 
    
 
    .portfolio_text { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    }

<a href="#"> 
 
    <div class="portfolio_bg"> 
 
     <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="portfolio_image"> 
 
     <div class="portfolio_caption">This is the text that I want to hide when the mouse is hovered but it doesn't go away!</div> 
 
     <div class="portfolio_overlay"> 
 
     <div class="portfolio_text">Hello World and the whole kind of thing goes down!</div> 
 
     </div> 
 
    </div> 
 
    </a>

Answer 2

diese CSS zu Ihrem hinzufügen und es sollte versteckt werden, wenn Sie auf dem Hintergrundbild schweben:

.portfolio_bg:hover .portfolio_caption { 
    opacity: 0; 
} 

prüfen JSFiddle here aktualisiert

Answer 3

Sie müssen den Hover des Behälters verwenden, die .portfolio_bg

Wenn Sie ist verwenden, um dies es funktioniert,

.portfolio_bg:hover .portfolio_caption 
{ 
    opacity: 0; 
} 

Answer 4

Fügen Sie einfach

hinzu

.portfolio_bg:hover .portfolio_caption{ 
    display:none; 
} 

in CSS-Datei.

Answer 5

Sehr einfach fügen Sie einfach eine Zeile in Ihrem css

CSS

.portfolio_bg:hover .portfolio_caption { 
     opacity: 0; 
    } // i have added this in code already 

.portfolio_bg { 
 
     position: relative; 
 
     width: 50%; 
 
    } 
 
    
 
    .portfolio_image { 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
    } 
 
    
 
    .portfolio_overlay { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
     height: 100%; 
 
     width: 100%; 
 
     opacity: 0; 
 
     transition: .5s ease; 
 
     background-color: rgba(104, 120, 129, 0.5); 
 
    } 
 
    
 
    .portfolio_bg:hover .portfolio_overlay { 
 
     opacity: 1; 
 
    } 
 
    .portfolio_bg:hover .portfolio_caption { 
 
     opacity: 0; 
 
    } 
 
    
 
    .portfolio_caption { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    } 
 
    .portfolio_caption:hover { 
 
     opacity: 0; 
 
     display: none; 
 
    } 
 
    
 
    .portfolio_text { 
 
     color: white; 
 
     font-size: 20px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
     left: 10%; 
 
    }

<a href="#"> 
 
    <div class="portfolio_bg"> 
 
     <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="portfolio_image"> 
 
     <div class="portfolio_caption">This is the text that I want to hide when the mouse is hovered but it doesn't go away!</div> 
 
     <div class="portfolio_overlay"> 
 
     <div class="portfolio_text">Hello World and the whole kind of thing goes down!</div> 
 
     </div> 
 
    </div> 
 
    </a>