Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .categorybox .row{
- margin: 0 -15px;
- justify-content: center;
- }
- .categorybox .item{
- height: 280px;
- background-color: #aaa;
- flex: 0 0 calc(33.33% - 30px);
- margin: 15px;
- background-repeat: no-repeat;
- background-size: cover;
- color: #fff;
- padding: 30px;
- }
- .categorybox .item h3{
- font-size: 18px;
- color: #fff;
- font-weight: bold;
- }
- .categorybox .item p{
- margin-bottom: 0;
- }
- .categorybox .item .popin {
- height: 0;
- overflow: hidden;
- -webkit-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- .categorybox .item:hover .popin{
- height: 90px;
- margin-bottom: 20px;
- }
- .healthcare{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-healthcare.jpg);}
- .legal{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-legal.jpg);}
- .finance{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-finance.jpg);}
- .accounting{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-accounting.jpg);}
- .non-profit{background-image: url(/wp-content/uploads/sites/3464/2020/10/img-non-profit.jpg);}
- .categorybox .item .overlay{
- background-color: #000;
- opacity: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- -webkit-transition: all 0.5s ease;
- transition: all 0.5s ease;
- top: 0;
- left: 0;
- }
- .categorybox .item:hover .overlay{
- opacity: 0.5;
- }
- .categorybox .item .inner{
- position: absolute;
- bottom: 20px;
- padding-right: 30px;
- }
- @media (max-width: 991px){
- .categorybox .item{
- flex: 0 0 calc(50% - 30px);
- }
- }
- @media (max-width: 767px){
- .categorybox .item{
- flex: 0 0 calc(100% - 30px);
- }
- .categorybox .item .popin {
- height: 40px;
- overflow: hidden;
- -webkit-transition: unset;
- transition: unset;
- }
- .categorybox .item:hover .popin{
- height: 40px;
- }
- .categorybox .overlay{
- display: none;
- }
- }
- @media (max-width: 500px){
- .categorybox .item .popin{
- height: 60px;
- }
- .categorybox .item:hover .popin{
- height: 60px;
- }
- }
- @media (max-width: 375px){
- .categorybox .item .popin{
- height: 90px;
- }
- .categorybox .item:hover .popin{
- height: 90px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement