ripple-hover-effect/example/css/easy.css

Javascript library to animate images on hover.

/**
 * Copyright 2021
 * Author: Essam Abed
 * Version: 1.0.0-beta
 **/

/**
 * fonts & variables
 **/
 @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500&family=Poppins:wght@300;400;500;600&display=swap');

 :root{
 
     /* colors */
     --primary: #228ae3;
     --secondary: #1acf47;
     --tersiary: #fff;
 
     --dark: #121212;
     --light: #EAF0FE;
 
     --gray-dark: #484848;
     --gray-light: #c7c7c7;
     --container-light: #F7FAFF;
     --container-dark: #F7FAFF;
     --text-light: #fff;
     --text-dark: #000;
 
     --orange: #f15926;
     --pink: #e463b3;
     --blue: #228ae3;
     --red: #F22A4F;
     --green: #1acf47;
     --orange-light: #FEEDE6;
     --pink-light: #FCEEF0;
     --blue-light: #d7e0f7;
     --red-light: #ffe3e0;
 
     /* border radius */
     --max-radius: 16px;
     --radius: 8px;
     --min-radius: 4px;
 
     /* text */
     --paragraph-size: 14px;
     --small-size: 10px;
     --h1-size: 26px;
     --h2-size: 24px;
     --h3-size: 22px;
     --h4-size: 20px;
     --h5-size: 18px;
     --h6-size: 16px;
 
     /* font */
     --font: 'Poppins';
     --secondary-font: 'Arial';
 
     /* custom padding */
     --custom_padding: 80px;
 
     /* flex gap */
     --flex-gap: 40px;
 
 }
 
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 html, body{
     background: var(--container-light);
     color: var(--text-dark);
     font: 400 normal var(--paragraph-size) var(--font), var(--secondary-font), sans-serif;
 }
 body{
     overflow-x: hidden;
 }
 a{
     text-decoration: none;
     color: white;
     transition: .3s all ease-in-out
 }
 a:hover{
     color: var(--primary);
 }
 ul{
     list-style-type: none;
 }
 
 /**
  * card
  **/
 /* classic card */
 .cards{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
     padding: 50px;
 }
 
 .cards .card{
     width: 300px;
     height: 350px;
     max-height: 400px;
     padding: 10px;
     background: var(--white);
     border-radius: var(--radius);
     box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, .5);
 }
 
 .card .card_bg{
     height: 150px;
     margin-bottom: 20px;
 }
 
 .card .card_bg>img{
     height: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: var(--radius);
 }
 
 .card .card_details h1{
     font-size: 18px;
     margin-bottom: 20px;
 }
 
 .card .card_details p{
     font-size: 14px;
     opacity: .7
 }
 
 /* card full */
 .card_full{
     position: relative;
     margin: 0 auto;
     margin-bottom: 20px;
     cursor: pointer;
 }
 
 .card_full>.card_bg{
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }
 .card_full>.card_bg>img{
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .card_full>.card_details{
     position: absolute;
     z-index: 2;
     bottom: 0px;
     left: 0;
     background: linear-gradient(to top, black, transparent);
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 40px;
 }
 .card_full>.card_details h1{
     font-size: 18px;
     color: white;
     margin-bottom: 20px;
 }
 .card_full>.card_details p{
     font-size: 13px;
     color: white;
 }
 
 /**
  * navbrand
  **/
 header{
     height: 100%;
 }
 
 .navbrand_bg{
     position: relative;
     width: 100vw;
     height: calc(100vh - 60px);
 }
 .navbrand_bg>img{
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.8)
 }
 .navbrand_details{
     position: relative;
     z-index: 2;
     width: 100%;
     height: 100%;
 
 }
 .navbrand_details.center{
     display: flex;
     flex-direction: column;
     justify-content: center;
     place-items: center;
 }
 
 @media (max-width: 600px){
     .navbrand_details.center>div{
         position: absolute;
         bottom: 150px;
         padding: 20px 25px 20px 20px;
         justify-content: flex-start !important;
         place-items: flex-start !important;
         text-align: left !important;
     }
 }
 
 /**
  * navigation
  **/
 .nav{
     max-height: 80px;
     height: 60px;
 }
 .nav_items{
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }
 .nav_item{
     margin-right: 20px;
 }
 .nav_item:last-child{
     margin-right: 0px;
 }
 .nav_item a{
     font: 400 normal 14px var(--font), var(--secondary-font), sans-serif;
     opacity: .8;
     transition: .3s all ease-in-out
 }
 
 .bg_light .nav_item a,
 .nav_item a{
     color: var(--text-dark)
 }
 .bg_dark .nav_item a{
     color: var(--text-light)
 }
 
 .nav_item a.active{
     font: 500 normal 14px var(--font), var(--secondary-font), sans-serif;
     opacity: 1;
 }
 .nav_item a:hover{
     color: var(--primary);
     opacity: 1;
 }
 
 .nav .nav_logo{
     width: 40px;
     height: 100%;
     object-fit: cover;
 }
 
 /**
  * backgrounds & colors
  **/
 .text_light{
     color: var(--text-light);
 }
 .text_dark{
     color: var(--text-dark);
 }
 .text_primary{
     color: var(--primary);
 }
 .text_secondary{
     color: var(--secondary);
 }
 .bg_light{
     background-color: var(--light);
     color: var(--text-dark);
 }
 .bg_dark{
     background-color: var(--dark);
     color: var(--text-light);
 }
 .bg_primary{
     background-color: var(--primary);
     color: var(--text-light);
 }
 .bg_secondary{
     background-color: var(--secondary);
     color: var(--text-light);
 }
 
 /**
  * flex
  **/
 .flex{
     display: flex;
 }
 .flex-wrap{
     flex-wrap: wrap;
 }
 .flex_between{
     justify-content: space-between;
 }
 .flex_around{
     justify-content: space-around;
 }
 .flex_evenly{
     justify-content: space-evenly;
 }
 .flex_center{
     align-items: center;
 }
 .flex_start{
     align-items: start;
 }
 .flex_end{
     align-items: end;
 }
 .flex .right{
     margin-left: calc(var(--flex-gap) / 2);
 }
 .flex .left{
     margin-right: calc(var(--flex-gap) / 2);
 }
 
 @media (max-width: 700px){
     .flex .right{
         width: 100%;
         margin-left: 0;
         margin-bottom: 40px;
     }
     .flex .left{
         width: 100%;
         margin-right: 0;
     }
     .flex.flex_mobile_column_reverse{
         flex-direction: column-reverse;
     }
     .flex.flex_mobile_row_reverse{
         flex-direction: row-reverse;
     }
 }
 
 /**
  * width & height
  **/
 .w_100{
     width: 100%;
 }
 .w_75{
     width: 75%;
 }
 .w_50{
     width: 50%;
 }
 .w_25{
     width: 50%;
 }
 
 .vw_100{
     width: 100vh;
 }
 .vw_80{
     width: 80vh;
 }
 .vw_60{
     width: 60vh;
 }
 .vw_50{
     width: 50vh;
 }
 .vw_40{
     width: 40vh;
 }
 .vw_20{
     width: 20vh;
 }
 
 .h_100{
     height: 100%;
 }
 .h_75{
     height: 75%;
 }
 .h_50{
     height: 50%;
 }
 .h_25{
     height: 50%;
 }
 
 .vh_100{
     height: 100vh;
 }
 .vh_80{
     height: 80vh;
 }
 .vh_60{
     height: 60vh;
 }
 .vh_50{
     height: 50vh;
 }
 .vh_40{
     height: 40vh;
 }
 .vh_20{
     height: 20vh;
 }
 
 /**
  * margin & padding
  **/
 .m_auto{
     margin: auto;
 }
 .m_1{
     margin: 5px;
 }
 .m_2{
     margin: 10px;
 }
 .m_3{
     margin: 15px;
 }
 .m_4{
     margin: 20px;
 }
 .m_5{
     margin: 25px;
 }
 
 .ml_1{
     margin-left: 5px;
 }
 .ml_2{
     margin-left: 10px;
 }
 .ml_3{
     margin-left: 15px;
 }
 .ml_4{
     margin-left: 20px;
 }
 .ml_5{
     margin-left: 25px;
 }
 
 .mr_1{
     margin-right: 5px;
 }
 .mr_2{
     margin-right: 10px;
 }
 .mr_3{
     margin-right: 15px;
 }
 .mr_4{
     margin-right: 20px;
 }
 .mr_5{
     margin-right: 25px;
 }
 
 .mt_1{
     margin-top: 5px;
 }
 .mt_2{
     margin-top: 10px;
 }
 .mt_3{
     margin-top: 15px;
 }
 .mt_4{
     margin-top: 20px;
 }
 .mt_5{
     margin-top: 25px;
 }
 
 .mb_1{
     margin-bottom: 5px;
 }
 .mb_2{
     margin-bottom: 10px;
 }
 .mb_3{
     margin-bottom: 15px;
 }
 .mb_4{
     margin-bottom: 20px;
 }
 .mb_5{
     margin-bottom: 25px;
 }
 
 .p_custom{
     padding: var(--custom_padding);
 }
 .pr_custom{
     padding-right: var(--custom_padding);
 }
 .pt_custom{
     padding-top: var(--custom_padding);
 }
 .pl_custom{
     padding-left: var(--custom_padding);
 }
 .pb_custom{
     padding-bottom: var(--custom_padding);
 }
 .p_auto{
     padding: auto;
 }
 .p_1{
     padding: 5px;
 }
 .p_2{
     padding: 10px;
 }
 .p_3{
     padding: 15px;
 }
 .p_4{
     padding: 20px;
 }
 .p_5{
     padding: 25px;
 }
 
 .pl_1{
     padding-left: 5px;
 }
 .pl_2{
     padding-left: 10px;
 }
 .pl_3{
     padding-left: 15px;
 }
 .pl_4{
     padding-left: 20px;
 }
 .pl_5{
     padding-left: 25px;
 }
 
 .pr_1{
     padding-right: 5px;
 }
 .pr_2{
     padding-right: 10px;
 }
 .pr_3{
     padding-right: 15px;
 }
 .pr_4{
     padding-right: 20px;
 }
 .pr_5{
     padding-right: 25px;
 }
 
 .pt_1{
     padding-top: 5px;
 }
 .pt_2{
     padding-top: 10px;
 }
 .pt_3{
     padding-top: 15px;
 }
 .pt_4{
     padding-top: 20px;
 }
 .pt_5{
     padding-top: 25px;
 }
 
 .pb_1{
     padding-bottom: 5px;
 }
 .pb_2{
     padding-bottom: 10px;
 }
 .pb_3{
     padding-bottom: 15px;
 }
 .pb_4{
     padding-bottom: 20px;
 }
 .pb_5{
     padding-bottom: 25px;
 }
 
 /**
  * text align
  **/
 .text-center{
     text-align: center;
 }
 .text-left{
     text-align: left;
 }
 .text-right{
     text-align: right;
 }
 .text-justify{
     text-align: justify;
 }
 
 /**
  * headings & paragraphs
  **/
 h1{
     font-size: var(--h1-size);
 }
 h2{
     font-size: var(--h2-size);
 }
 h3{
     font-size: var(--h3-size);
 }
 h4{
     font-size: var(--h4-size);
 }
 h5{
     font-size: var(--h5-size);
 }
 h6{
     font-size: var(--h6-size);
 }
 p{
     font-size: var(--paragraph-size);
 }
 small{
     font-size: var(--small-size);
 }
 h6.subheader{
     font-size: calc(var(--h6-size)/1.2);
     font-weight: 500;
     font-style: italic;
 }
 
 @media (max-width: 500px){
     h1{
         font-size: calc(var(--h1-size)/1.3);
     }
     h2{
         font-size: calc(var(--h2-size)/1.3);
     }
     h3{
         font-size: calc(var(--h3-size)/1.3);
     }
     h4{
         font-size: calc(var(--h4-size)/1.3);
     }
     h5{
         font-size: calc(var(--h5-size)/1.3);
     }
     h6{
         font-size: calc(var(--h6-size)/1.3);
     }
     p{
         font-size: calc(var(--paragraph-size)/1.01);
     }
     small{
         font-size: calc(var(--small-size)/1.01);
     }
     h6.subheader{
         font-size: calc(var(--h6-size)/1.3);
     }
 }
 
 /**
  * images
  **/
 .img_half{
     width: 50%;
     height: 100%;
 }
 .img_half>img{
     width: 100%;
     height: 100%;
     object-fit: cover
 }
 
 /**
  * buttons
  **/
 .btn{
     border: 1px solid var(--primary);
     border-radius: var(--min-radius);
     padding: 8px 15px;
     outline: none;
     font: 500 bold 16px var(--font), var(--secondary-font), sans-serif;
     box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.25);
     transition: .3s all ease-in-out;
 }
 
 .btn_primary{
     background: var(--primary);
     border-color: var(--primary);
     color: var(--text-light);
 }
 
 .btn_primary:hover{
     background: var(--text-light);
     border-color: var(--primary);
     color: var(--primary);
 }
 
 .btn_outline_primary{
     background: var(--text-light);
     border-color: var(--primary);
     color: var(--primary);
 }
 
 .btn_outline_primary:hover{
     background: var(--primary);
     border-color: var(--primary);
     color: var(--text-light);
 }