Hexagon and Transition Effect (CSS Snippet)
selector{ clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%); -webkit-transition: all 0.5s !important; transition: all 0.5s !important; } selector:hover{ -webkit-transform: translateY(-30px); transform: translateY(-30px); } .shadow::before{ content: ''; position: absolute; bottom: -70px !important; width: 100%; color: #fff; height: 60px; border-radius: 50%; background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent); background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent); display: block; -webkit-transition: all 0.8s !important; transition: all 0.8s !important; z-index: 999; } .shadow:hover::before{ opacity: 1 !important; -webkit-transform: scale(0.8); transform: scale(0.8); }
Hide and Show (CSS Snippet)
selector .elementor-background-overlay{ -webkit-transition: all 0.5s !important; transition: all 0.5s !important; opacity: 0 !important; } selector:hover .elementor-background-overlay{ opacity: 0.85 !important; } /*Column Element Show/Hide CSS*/ selector .elementor-column{ opacity: 0; -webkit-transition: all 0.8s !important; transition: all 0.8s !important; } selector:hover .elementor-column{ opacity: 1; }