画像のホバー上でスライドする

Question

divにホバーしているときにスライドアップ効果を持たせたい。

.intro-page__img { 
 
    margin-bottom: 15px; 
 
    border: solid 1px #eee; 
 
    padding: 5px; 
 
    box-shadow: 0 0 3px #eee; 
 
    border-radius: 3px; 
 
} 
 
.intro-page__link:hover { 
 
    color: #666; 
 
} 
 
.theme_view{ 
 
    width:100%; 
 
    position:relative; 
 
} 
 
.theme_view .overlay { 
 
    position:absolute; 
 
    display:none; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color:#ffffff; 
 
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; 
 
    z-index:9999; 
 
    color:black; 
 
    height:65px; 
 
    border:1px solid #eee; 
 
} 
 
.theme_view:hover .overlay{ 
 
    display:block; 
 
    margin-top:-200px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="theme_view"> 
 
       <img class="img-responsive intro-page__img" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt=""> 
 
       <div class="overlay"> 
 
        <button class="btn btn-dark custom_button_width margin_top_15">Preview</button> 
 
       </div> 
 
     </div> 
 
    </div> 
 
</div>

それが唯一のCSSを使用して行われる場合、それは素晴らしいことです。画像にカーソルを合わせるとプレビューボタンdivを上にスライドしたい。

ありがとうございます。

助けがあれば助かります。

Answer 1

を使用し、100％の幅とプレビューを隠すための-60％ボタン。（あなたが100％の幅を使用している場合は、スライド応答すると、ボタンが正常に動作するまでスライドさせます）

.intro-page__link:hover { 
 
    color: #666; 
 
    } 
 
    .theme_view{ 
 
    width:100%; 
 
    position:relative; 
 
    overflow:hidden; 
 
    } 
 
    .theme_view .overlay { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    bottom: -60%; 
 
    transition: all .35s; 
 
    -webkit-transition: all .35s; 
 
    background-color: green; 
 
    text-align: center; 
 
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; 
 
    z-index:9999; 
 
    color:black; 
 
    height:65px; 
 
    border:1px solid #eee; 
 
    } 
 
    .theme_view:hover .overlay{ 
 
    bottom:0; 
 
    } 
 
    .btn { margin-top: 12px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
    
 
    <div class="theme_view"> 
 
    <img class="img-responsive intro-page__img" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt=""> 
 
    <div class="overlay"> 
 
    <button class="btn btn-dark custom_button_width">Preview</button> 
 
    </div> 
 
    </div> 
 
    
 

 
    </div>

Answer 2

単純な変換：divのtranslateY（）はそれを行う必要があります。 私は通常、次のように、translate-propertyでpxまたは％を使用します。 transform：translateY（-10％）;

transitionプロパティは必要ありませんが、アニメーションをスムーズにするためには推薦したいと思います。トランジションのスピードで遊ぶ必要がありますが、一般的に0.1秒〜0.4秒（100〜400ミリ秒）はウェブページ上のアニメーションの推奨速度です。

これが役に立ちます。ここで

Answer 3

例ですが、あなたがあまりにも学ぶことができますので、あなたは、独自のコードでこれを統合する必要があります：P

.hide { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    -moz-transition-duration: 1s; 
 
    -webkit-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
} 
 
h1:hover + .hide { 
 
    -moz-transition-duration: 2s; 
 
    -webkit-transition-duration: 2s; 
 
    -o-transition-duration: 2s; 
 
    transition-duration: 2s; 
 
    max-height: 1000px; 
 
    overflow: hidden; 
 
}

<h1><a href="#">Show Test</a></h1> 
 
<p class="hide">I'm a barbie girl in a barbie world. All is plastic, its fantastic!</p>