@import "../globalCssVariables"; .type-outer { display: flex; flex-direction: column; align-items: center; width: 45px; height: 60px; .type-icon { height: 45px; width: 45px; color: $light-color; border-radius: 50%; display: flex; justify-content: center; align-items: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size: 2em; .fontawesome-icon { height: 24px; width: 24px; } } .filter-description { text-transform: capitalize; font-size: 10; text-align: center; height: 15px; margin-top: 5px; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .type-icon:hover { transform: scale(1.1); background-color: $darker-alt-accent; opacity: 1; +.filter-description { opacity: 1; } } }