user123 user123 - 1 month ago 17
CSS Question

Slide up on hover on the image

I want to have a slide up effect while hovering on the 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>





It would be great if it is done by using only CSS. I want to slide up the Preview Button div when i hover on the image.

Thank You.

Any help would be great.

Answer

Use 100% width and -60% for hiding the preview button.(If you are using 100% width then slide will be responsive and slide up button properly works)

  .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>

Comments