CSS Hover Effects | Fade in Text with Background Source Code

Fade in Text with Background Hover

This video is going to show you how to create a CSS Fade in text with background Hover effect. An image is covered with a solid color fades in with a text when a user hovers it.

The HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.  
  7.  
  8. <div class="wrapper">
  9.  <img src="animal.jpeg">
  10.  
  11.  
  12. <div class="overlay">
  13.  
  14.  
  15. <div class="content">Fade In<span>Fade In text</span></div>
  16.  
  17.  
  18.  </div>
  19.  
  20.  
  21. </div>
  22.  
  23.  
  24.  
  25. </body>
  26. </html>

The CSS

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

Fade In Background Opacity(transparent) Hover

The HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS hover effects: Fade In Background opacity</title>
  5. </head>
  6.  
  7. <body>
  8.  
  9.  
  10.  
  11.  
  12. <div class="wrapper">
  13. <img src="highland.jpeg">
  14.  
  15.  
  16.  
  17. <div class="overlay">
  18.  
  19.  
  20. <div class="content">
  21. the title <a>read more</a>
  22. </div>
  23.  
  24.  
  25.  
  26. </div>
  27.  
  28.  
  29.  
  30. </div>
  31.  
  32.  
  33.  
  34.  
  35. </body>
  36. </html>

The CSS

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

Leave a Reply

avatar
  Subscribe  
Notify of