Facebook
From lucek, 3 Months ago, written in CSS.
Embed
Download Paste or View Raw
Hits: 82
  1. .slider {
  2.   position: relative;
  3.   width: 50%;
  4. }
  5.  
  6. .slider_image {
  7.   display: block;
  8.   width: 100%;
  9.   height: auto;
  10. }
  11.  
  12. .slider_overlay {
  13.   position: absolute;
  14.   bottom: 100%;
  15.   left: 0;
  16.   right: 0;
  17.   background-color: #ff800a;
  18.   overflow: hidden;
  19.   width: 100%;
  20.   height:0;
  21.   transition: .5s ease;
  22. }
  23.  
  24. .slider:hover .slider_overlay {
  25.   bottom: 0;
  26.   height: 100%;
  27. }
  28.  
  29. .slider_text {
  30.   white-space: nowrap;
  31.   color: white;
  32.   font-size: 20px;
  33.   position: absolute;
  34.   overflow: hidden;
  35.   top: 50%;
  36.   left: 50%;
  37.   transform: translate(-50%, -50%);
  38.   -ms-transform: translate(-50%, -50%);
  39. }
  40.  
  41.  
  42.  
  43. <!-- STRONA-->
  44. <div class="responsive">       
  45.         <div class="slider">
  46.           <img src="images/card_prev.jpg" alt="Avatar" class="slider_image">
  47.           <div class="slider_overlay">
  48.                 <div class="slider_text">CARD DESCRIPTION</div>
  49.           </div>
  50.         </div>
  51. </div>
  52.  
  53.  
  54.