CSS Hover Effects: Slide in Text from the Top with Background

CSS Hover Effects: Slide in Text from the Top with Background

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

The HTML

  1. <div class="wrapper">
  2. <img src="lizard.jpeg">
  3. <div class="overlay">
  4. <div class="content">
  5. Slide in <span> From the Top </span>
  6. </div>
  7. </div>
  8. </div>

 

The CSS

  1. img{
  2. display:block;
  3. width: 100%;
  4. height: auto;
  5.  
  6. }
  7. .wrapper{
  8. font-family: sans-serif;
  9. width: 80%;
  10. margin: 0 auto;
  11. position: relative;
  12. }
  13. .content{
  14. white-space: nowrap;
  15. position:absolute;
  16. top: 45%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. -ms-transform: translate(-50%, -50%);
  20. color: #fff;
  21. font-size: 60px;
  22. overflow: hidden;
  23.  
  24. }
  25. .content span{
  26. font-size: 24px;
  27. display: block;
  28. }
  29. .overlay{
  30. position: absolute;
  31. bottom: 100%;
  32. left: 0;
  33. right: 0;
  34. background-color: #ff217f;
  35. width: 100%;
  36. height: 0;
  37. transition: .5s ease;
  38. overflow: hidden;
  39.  
  40. }
  41. .wrapper:hover .overlay{
  42. bottom: 0;
  43. height: 100%
  44. }
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 *