Wie man eine css translateY auf Hover-Effekt

Question

Ich suche einen CSS-Hover-Effekt zu erstellen, die ich weiß, muss möglich sein, aber ich kann es einfach nicht ausarbeiten und fragte mich, ob einige helle Funken in der Lage wäre, mich zu zeigen in die richtige Richtung!

See this image here showing what I would like to achieve

So etwas Text in einem div über einem Bild zeigt, aber wenn Sie auf dem Bild/Text div schweben der Inhalt nach oben in einem glatten Stil bewegt

Wäre dies mit einem -webkit- sein Übergang translateY Element?

Vielen Dank im Voraus für alle Ratschläge oder Anleitungen, die Sie haben können! Adam

Answer 1

Nur der Vollständigkeit halber und die beiden Übergänge Methoden im Vergleich zu sehen.

A jsfiddle Hier haben Sie zwei Beispiele für diesen Hover-Effekt. Eine mit position: top die andere mit transform: translateY

Es gibt keinen wirklichen Unterschied. Der translateY scheint beim wiederholten Rollout/Rollover glatter zu sein (Paulie_D erwähnte bereits den Leistungsgewinn in seiner Antwort oben)

Answer 2

Ja, Sie müssen die translateY Eigenschaft verwenden.

Die drei Dinge, die Sie wollen erinnern ist:

transform: translateY(); - das ist natürlich für die Positionierung

transition: transform 0.2s ease 0s; - das ist die Bewegung

overflow:hidden; zu glätten - das ist der Boden zu verstecken Teil, wenn Sie nicht schweben.

Hier ist eine Geige: https://jsfiddle.net/bwu8ckhn/

Code:

.one { 
 
    width:300px; 
 
    height:300px; 
 
    margin: 50px auto; 
 
    overflow:hidden; 
 
    background-color:lightblue; 
 
} 
 

 
.two { 
 
    width:100%; 
 
    height:100%; 
 
    background-color:rgba(0,0,0,0.8); 
 
    -webkit-transform: translateY(200px); 
 
    transform: translateY(200px); 
 
    -webkit-transition: transform 0.2s ease 0s; 
 
    transition: transform 0.2s ease 0s; 
 
} 
 

 
.one:hover .two { 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
p { 
 
    margin:0; 
 
    padding: 1em; 
 
    color:#ffffff; 
 
}

<div class="one"> 
 
    <div class="two"> 
 
    <p> 
 
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
 
    </p> 
 
    </div> 
 
</div>

Answer 3

Hat es haben übersetzt werden ... nein, Sie können dies tun, mit Positionierung.

Möglicherweise ist die Verwendung der Übersetzungsmethode möglicherweise besser für die Leistung.

.one { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 50px auto; 
 
    overflow: hidden; 
 
    background-color: #663399; 
 
    position: relative; 
 
} 
 
.two { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: absolute; 
 
    top: 80%; 
 
    transition: top .5s ease; 
 
    color: white 
 
} 
 
.one:hover .two { 
 
    top: 0; 
 
} 
 
p { 
 
    margin: 0; 
 
    padding: 1em; 
 
    color: #ffffff; 
 
}

<div class="one"> 
 
    <div class="two"> 
 
    <h2>Content</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aut provident quasi veniam earum officiis vero odit doloribus blanditiis? Veritatis ab repudiandae non labore eligendi quasi officia quibusdam accusamus sit harum quisquam soluta tempore, 
 
     odio at, iste animi numquam officiis, quam ipsa! Fuga suscipit temporibus perspiciatis explicabo ipsa laudantium aut. 
 
    </p> 
 
    </div> 
 
</div>