CSS Hover Effects: Slide in Text from the Bottom with Background Overlay

css hover effects: Slide in text from the bottom with background

This video is going to show you how to create a CSS Hover Effects: Slide in Text from the Bottom with Background Overlay

 

The HTML

  1. <div class="wrapper">
  2. <img src="relax.jpeg">
  3. <div class="overlay">
  4. <div class="content">
  5. slide in <span> from the bottom </span>
  6. </div>
  7. </div>
  8. </div>

 

The CSS

  1. .wrapper{
  2. font-family: sans-serif;
  3. width: 80%;
  4. margin: 0 auto;
  5. position: relative;
  6. }
  7. img{
  8. display:block;
  9. width:100%;
  10. height: auto;
  11. }
  12. .content{
  13. position: absolute;
  14. top: 45%;
  15. left: 45%;
  16. transform: translate(-50%, -50%);
  17. -ms-transform: translate(-50%, -50%);
  18. color: #fff;
  19. text-transform: uppercase;
  20. font-size:60px;
  21. white-space: nowrap;
  22. overflow: hidden;
  23.  
  24. }
  25. .content span{
  26. font-size:24px;
  27. display: block;
  28. }
  29. .overlay{
  30. position: absolute;
  31. bottom: 0;
  32. left: 0;
  33. right: 0;
  34. background-color: #8466ff;
  35. width: 100%;
  36. height: 0;
  37. transition: .5s ease;
  38. overflow: hidden;
  39. }
  40. .wrapper:hover .overlay{
  41. height: 100%
  42. }
Hi, did you know that we have a youtube channel? It's called Garnatti one. Check it out!
I believe that education must be free to everyone. Feel free to share.

Leave a comment

Your email address will not be published. Required fields are marked *