Наведите курсор на изображение

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, когда я наведите курсор на изображение.

Thank you.

Любая помощь будет отличной.

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

Простое преобразование: translateY() на div должно сделать это за вас. Обычно я использую либо px, либо% с трансляцией, например: transform: translateY (-10%);

Переход-свойство не обязательно, но я бы рекомендовал его, чтобы сделать анимацию более плавной. Вы должны играть со скоростью перехода, но, как правило, 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>