MaewRS

Text popup and overlay [CSS]

Oct 21st, 2020
1,355
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .categorybox .row{
  2.     margin: 0 -15px;
  3.     justify-content: center;
  4. }
  5.  
  6. .categorybox .item{
  7.     height: 280px;
  8.     background-color: #aaa;
  9.     flex: 0 0 calc(33.33% - 30px);
  10.     margin: 15px;
  11.     background-repeat: no-repeat;
  12.     background-size: cover;
  13.     color: #fff;
  14.     padding: 30px;
  15. }
  16.  
  17.  
  18.  
  19. .categorybox .item h3{
  20.     font-size: 18px;
  21.     color: #fff;
  22.     font-weight: bold;
  23. }
  24.  
  25. .categorybox .item p{
  26.    margin-bottom: 0;
  27. }
  28.  
  29. .categorybox .item .popin {
  30.     height: 0;
  31.     overflow: hidden;
  32.     -webkit-transition: all 0.5s ease;
  33.     transition: all 0.5s ease;  
  34. }
  35.  
  36. .categorybox .item:hover .popin{
  37.     height: 90px;
  38.     margin-bottom: 20px;
  39. }
  40.  
  41. .healthcare{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-healthcare.jpg);}
  42. .legal{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-legal.jpg);}
  43. .finance{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-finance.jpg);}
  44. .accounting{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-accounting.jpg);}
  45. .non-profit{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-non-profit.jpg);}
  46.  
  47.  
  48. .categorybox .item .overlay{
  49.     background-color: #000;
  50.     opacity: 0;
  51.     width: 100%;
  52.     height: 100%;
  53.     position: absolute;
  54.      -webkit-transition: all 0.5s ease;
  55.     transition: all 0.5s ease;  
  56.     top: 0;
  57.     left: 0;
  58. }
  59.  
  60. .categorybox .item:hover .overlay{
  61.     opacity: 0.5;
  62.  
  63. }
  64.  
  65. .categorybox .item .inner{
  66.     position: absolute;
  67.     bottom: 20px;
  68.     padding-right: 30px;
  69. }
  70.  
  71. @media (max-width: 991px){
  72.  
  73.     .categorybox .item{
  74.         flex: 0 0 calc(50% - 30px);
  75.     }
  76.    
  77. }
  78.  
  79. @media (max-width: 767px){
  80.     .categorybox .item{
  81.         flex: 0 0 calc(100% - 30px);
  82.     }
  83.  
  84.     .categorybox .item .popin {
  85.         height: 40px;
  86.         overflow: hidden;
  87.         -webkit-transition: unset;
  88.         transition: unset;  
  89.     }
  90.  
  91.     .categorybox .item:hover .popin{
  92.         height: 40px;
  93.     }
  94.     .categorybox .overlay{
  95.         display: none;
  96.     }
  97. }
  98.  
  99. @media (max-width: 500px){
  100.  
  101.     .categorybox .item .popin{
  102.         height: 60px;
  103.     }
  104.     .categorybox .item:hover .popin{
  105.         height: 60px;
  106.     }
  107. }
  108.  
  109. @media (max-width: 375px){
  110.  
  111.     .categorybox .item .popin{
  112.         height: 90px;
  113.     }
  114.     .categorybox .item:hover .popin{
  115.         height: 90px;
  116.     }
  117. }
RAW Paste Data