Wie zeigt man Text img Link Hover?

Ich habe versucht, Methoden von anderen Benutzern auf Stackoverflow Benutzer vorgeschlagen, die mehr oder weniger die gleiche Frage gestellt, aber trotz der gleichen Methoden zu meinem Code, der Text endet unterhalb der IMG.Wie zeigt man Text img Link Hover?

Ich folgte auch dieser Methode: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade aber das gleiche passierte.

html, 
 
body { 
 
    font-family: ; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    text-transform: none; 
 
    font-family: europa; 
 
    font-weight: 400; 
 
    font-style: normal; 
 
    line-height: 1.3em; 
 
    letter-spacing: 0em; 
 
    text-transform: none; 
 
    color: #000; 
 
} 
 

 
.header h1 { 
 
    background-color: ; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    letter-spacing: 0.8px; 
 
} 
 

 
.header .nav { 
 
    float: right; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
    letter-spacing: 0.8px; 
 
} 
 

 
.header .nav a { 
 
    font-family: Europa; 
 
    color: black; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
} 
 

 
.row { 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
} 
 

 
.container-fluid { 
 
    padding: ; 
 
    margin: 0 auto; 
 
} 
 

 
#text { 
 
    font-family: europa; 
 
    font-weight: 400; 
 
    font-style: normal; 
 
    font-size: 3em; 
 
    line-height: 1.3em; 
 
    letter-spacing: 0em; 
 
    text-transform: none; 
 
    color: #000; 
 
    width: 50%; 
 
    padding: 10px; 
 
} 
 

 
.col-md-6 { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    float: left; 
 
    text-align: center; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
    height: 100%; 
 
} 
 

 
.col-md-6 .wrapper { 
 
    padding: 0; 
 
    border: 0px solid black; 
 
} 
 

 
.col-md-6 .wrapper img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.col-md-6 .wrapper img:hover { 
 
    opacity: 0.6; 
 
    transition: opacity 0.5s ease-in-out; 
 
    -moz-transition: opacity 0.5s ease-in-out; 
 
    -webkit-transition: opacity 0.5s ease-in-out; 
 
} 
 

 
@media only screen and (max-width: 800px) { 
 
    .col-md-6 { 
 
    float: none; 
 
    background-color: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    #text { 
 
    float: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    .header .nav { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    } 
 
    .header .nav a { 
 
    padding-left: 0; 
 
    } 
 
    .header h1 { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 400px) { 
 
    .col-md-6 { 
 
    float: none; 
 
    background-color: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    #text { 
 
    float: none; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    .header .nav { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    .header .nav a { 
 
    padding-left: 0; 
 
    } 
 
    .header h1 { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 0; 
 
    width: 100%; 
 
    } 
 
    span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    } 
 
    span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    } 
 
    .img-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    } 
 
    .img-list { 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 0 1em 1em 0; 
 
    position: relative; 
 
    width: 150px; 
 
    } 
 
    span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    } 
 
    .img-list:hover span.text-content { 
 
    opacity: 1; 
 
    } 
 
    span.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="animate.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link href="style.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa"> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="header"> 
 
    <div class="container-fluid"> 
 
     <h1 id="firstName">Header</h1> 
 
     <div class="nav"> 
 
     <a href="#">About</a> 
 
     <a href="#">Work</a> 
 
     <a href="#">Photo</a> 
 
     <a href="#">Blog</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container-fluid"> 
 
    <h1 id="text">Design &amp; code.</h1> 
 
    <div class="col-md-6"> 
 
     <div class="wrapper"> 
 
     <a href=""> 
 
      <img src="http://via.placeholder.com/350x150"> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="wrapper"> 
 
     <a href="#"> 
 
      <img src="http://via.placeholder.com/350x150" /> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="wrapper"> 
 
     <div class="img-list"> 
 

 
      <a href="#"> 
 
      <img src="http://via.placeholder.com/350x150" /> 
 
      <span class="text-content"><span>Place Name</span></span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="wrapper"> 
 

 
     <a href="#"> 
 
      <img src="http://via.placeholder.com/350x150" /> 
 
     </a> 
 

 
     </div> 
 
    </div> 
 

 

 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Quelle

2017-09-06 user8473431

Haben Sie vergessen, irgendwo einen Positionierungskontext ('position: relative') festzulegen? –

Können Sie ein Code-Snippet einfügen, so dass wir die Ausgabe sehen können, die Sie erhalten. – DivyaMaheswaran

entfernte ich alle unnötigen Code so klar sein wird, was Sie hinzufügen müssen. Im Grunde schwanken wir, indem wir .caption Opazität zu 1 ändern. ist absolut innerhalb .wrapper positioniert und hat <span> mit Text im Inneren.

.wrapper>a { 
 
    position: relative; 
 
    z-index: 0; 
 
    display: block; 
 
} 
 

 
.wrapper>a>img { 
 
    width: 100%; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transition: opacity .4s; 
 
    color: white; 
 
    background: rgba(0, 0, 255, 0.5); 
 
    opacity: 0; 
 
} 
 

 
.caption>span { 
 
    font-size: 48px; 
 
} 
 

 
.wrapper > a:hover .caption { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<div class="col-md-6"> 
 
    <div class="wrapper"> 
 
    <a href="#"> 
 
     <div class='caption'> 
 
     <span>Text on hover</span> 
 
     </div> 
 
     <img src="http://via.placeholder.com/350x150" /> 
 
    </a> 
 
    </div> 
 
</div>

Quelle

2017-09-06 16:37:39 godblessstrawberry

erstellen Sie den Text an der Stelle des Bildlink relativ angezeigt werden soll, dann diesen Code verwenden:

#wrapper .text { 
 
    position:relative; 
 
    bottom:30px; 
 
    left:0px; 
 
    visibility:hidden; 
 
} 
 

 
#wrapper:hover .text { 
 
    visibility:visible; 
 
}

<div id="wrapper"> 
 
    <img src="http://placehold.it/300x200" class="hover" /> 
 
    <p class="text">text</p> 
 
</div>

Ich glaube, ich Versteh was du suchst ....

Quelle

2017-09-06 16:39:07 EgMusic

hast du dein Ergebnis überprüft? es sieht kaputt aus – godblessstrawberry

Ich mache mir keine Sorgen, wie es aussieht, solange es funktioniert. – EgMusic

Aber ich verstehe was du meinst. Ich weiß nicht, wie ich das im Moment beheben soll. – EgMusic

Ich denke, dass Ihr Code so funktioniert, wie Sie möchten, wenn die Bildschirmbreite kleiner oder gleich 400px ist.

Dies liegt daran, dass Sie die entsprechenden Stile unter der Medienabfrage gesetzt:

@media only screen and (max-width: 400px) { 

/* Your styles related to displaying the text are here*/ 

}

Hinweis: Vergessen Sie nicht, die Medienabfrage zu schließen. Sie sind in dem von Ihnen geposteten Code nicht geschlossen.

Quelle

2017-09-06 17:13:24

Wie zeigt man Text img Link Hover?

Antwort

Verwandte Themen