sluttoggle in reinem Javascript

Question

Wie Sie vielleicht sehen, habe ich eine Art Textbox repariert, die erscheint, wenn jemand über dem Bild schwebt, aber ehrlich gesagt möchte ich einen Slide-Up-Effekt, der langsam ansteigt. Muss komplett in reinem JavaScript sein (keine jQuery bitte!). Jeder weiß, wie ich das machen kann.

function show(myText) { 
 
    var elements = document.getElementsByClassName(myText) 
 
    
 
    for(var i = 0; i < elements.length; i++){ 
 
     elements[i].style.visibility = "visible"; 
 
    } 
 
} 
 

 
function hide(myText) { 
 
    var elements = document.getElementsByClassName(myText) 
 
    
 
    for(var i = 0; i < elements.length; i++){ 
 
     elements[i].style.visibility = "hidden"; 
 
    } 
 
}

.text1 { 
 
\t position: relative; 
 
\t bottom: 28px; 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
\t visibility: hidden; 
 
} 
 

 
.text2 { 
 
\t position: relative; 
 
\t bottom: 28px; 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
\t visibility: hidden; 
 
}

<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')"> 
 
     <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/> 
 
     <div class="text1">AAA</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')"> 
 
     <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/> 
 
     <div class="text2">BBB</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Hier ist eine Version davon, die völlig Javascript-frei ist, nur mit CSS. Ich werde dies bald mit einem leichten JavaScript-Zusatz bearbeiten (diese aktuelle Version erfordert eine feste Größe).

.caption { 
 
    height: 250px; 
 
    width: 355px; 
 
    overflow: hidden; 
 
} 
 
.caption-image { 
 
    height: 100%; 
 
} 
 
.caption-text { 
 
    color: white; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    transition: transform 400ms ease; 
 
} 
 
.caption-image:hover + .caption-text, 
 
.caption-text:hover { 
 
    transform: translateY(-100%); 
 
}

<div class="caption"> 
 
    <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" /> 
 
    <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div> 
 
</div> 
 

 
<div class="caption"> 
 
    <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" /> 
 
    <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div> 
 
</div>

Version mit JS Sizing:

Im Grunde die gleiche Idee, aber wenn die Seite geladen wird es bestimmte Stile setzt so können die Bilder sein, was überhaupt Größe Sie möchten.

var captionSel = document.querySelectorAll('.caption'); 
 

 
for (let i = 0; i < captionSel.length; i++) { 
 
    let image = captionSel[i].querySelector(":scope > .caption-image"); 
 
    let text = captionSel[i].querySelector(":scope > .caption-text"); 
 
    text.style.width = image.clientWidth - 20 + "px"; 
 
    captionSel[i].style.height = image.clientHeight + "px"; 
 
}

.caption { 
 
    overflow: hidden; 
 
} 
 
.caption-text { 
 
    color: white; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    transition: transform 400ms ease; 
 
} 
 
.caption-image:hover + .caption-text, 
 
.caption-text:hover { 
 
    transform: translateY(-100%); 
 
}

<div class="caption"> 
 
    <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" /> 
 
    <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div> 
 
</div> 
 

 
<div class="caption"> 
 
    <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" /> 
 
    <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div> 
 
</div>

Answer 2

ich es dir geben werde noch besser: überhaupt kein Javascript! Dies ist möglich mit reinem CSS:

.tumb-wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
\t text-align: center; 
 
\t background-color: grey; 
 
\t width: 100%; 
 
\t height: 10%; 
 
\t font-size: 20px; 
 
\t color: white; 
 
\t opacity: 0.7; 
 
\t display: block; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    transition: 300ms; 
 
    left: 0; 
 
} 
 

 
.tumb-wrapper:hover .text { 
 
    bottom: 28px; 
 
}

<div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.bbc.com" target="_blank" class="image"> 
 
     <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/> 
 
     <div class="text">AAA</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-12"> 
 
    <div class="tumb-wrapper"> 
 
     <a href="http://www.cnn.com" target="_blank" class="image"> 
 
     <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/> 
 
     <div class="text">BBB</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Die transition CSS-Eigenschaft beseelt, was Änderung, die Sie machen. Auf diese Weise, wenn Sie den Mauszeiger über das .tumb-wrapper div halten, wird das .text div nach oben verschoben.

You should note however, that ancient IE versions won't be able to use this

Answer 3

ich tun dies in der Regel mit nur CSS. Speichern Sie das erste und das zweite Bild direkt nebeneinander in einer Datei ... und verwenden Sie dann css, um die Position des Hintergrundbildes zu ändern. Um die Dinge schöner zu machen, füge ich der Bewegung des Hintergrundbildes eine CSS-Animation hinzu.

Beispiel meines Codes:

<div id="thumb_Wrapper">  
    <div class="_Thumb"> 
    <img src="images/Thumb.jpg" class="Animate_left"> 
    </div> 
</div> 

Die CSS

#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;} 
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;} 
    ._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;} 
    ._Thumb > img:hover{left:-18px; cursor:pointer;} 

CSS-Animation

.Animate_left{transition:left .3s;} 

Alles was Sie jetzt tun müssen, ist aus dem Bild zu tauschen. onHover - das Bild im Thumbnail wird sanft nach links verschoben; den Rest des Bildes zeigen/das andere Bild zeigen.

Sie können festlegen, wie weit nach links (oder rechts) das Daumendarstellungsbild zuerst angezeigt werden soll, indem Sie den Wert von 'left' in der Klasse ._Thumb anpassen. Sie können festlegen, wie weit das Bild bei Hover verschoben wird, indem Sie den Befehl img: hover {left: -18px} an den jeweils gewünschten Wert anpassen. anstelle von 18px.