File Manager

X7ROOT File Manager

Current Path: /home/okeydcqc/public_html/wp-content/uploads/ac_assets/uc_icon_hover_effects

home / okeydcqc / public_html / wp-content / uploads / ac_assets / uc_icon_hover_effects /

ðŸ“ ..
ðŸ“„ .htaccess(123 B)
ðŸ“„ preview_addon.gif(42.07 KB)
ðŸ“„ preview_icon.svg(487 B)
ðŸ“„ uc_icon_hover_effects.css(16.2 KB)

Editing: uc_icon_hover_effects.css

.uc_icon_hover_effects *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.uc_icon_hover_effects .uc_icon_holder{
	position: relative;
	text-align: center;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box{
	width: 100%;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a{
	display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 10px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: fff;
	transition: all ease-in-out 0.3s  !important;
	-webkit-transition: all ease-in-out 0.3s !important;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:before,
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:after{
	box-sizing: unset;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box a:before{
	content: "";
	pointer-events: none;
    position: absolute;
	width: 100%;
    height: 100%;
	border-radius: 50%;	
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box i{
    font-size: 48px;
    line-height: 90px;
}

/*Effect-1*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1{
	color: #fff;
    background: rgba(255,255,255,0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:hover{
	background: rgba(255,255,255,1);
    color: #41ab6b;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:before{
	top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-1:hover:before{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/*Effect-2*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2{
    color: #eea303;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:hover{
	color: #eea303;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:before{
	top: -2px;
    left: -2px;
    margin: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-2:hover:before{
	-webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}

/*Effect-3*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3{
	color: #f06060;
	box-shadow: 0 0 0 4px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:hover{
	color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:before{
	top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-3:hover:before{
	-webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}

/*Effect-4*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4{
    color: #fff;
	width: 90px;
    height: 90px;
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
	-webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4:hover{
	box-shadow: 0 0 0 0 rgba(255,255,255,0);
    color: #fff;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-4:before{
	top: -4px;
    left: -4px;
    padding: 0;
    z-index: 10;
    border: 4px dashed #fff;
}

/*Effect-5*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5{
	color: #fff;
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5:hover{
	background: rgba(255,255,255,1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-5:hover i{
	-webkit-animation: toRightFromLeft 0.3s forwards;
    -moz-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
}

/*Effect-6*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6{
	color: #fff;
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:hover{
	background: rgba(255,255,255,1);
    color: #64bb5d;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:before{
	pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-6:hover i {
    -webkit-animation: spinAround 2s linear infinite;
    -moz-animation: spinAround 2s linear infinite;
    animation: spinAround 2s linear infinite;
}

/*Effect-7*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7{
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
	color: rgba(255,255,255,0.8);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7 i{
	color: inherit;
	-webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover i{
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover{
	color: #fff;
}

.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:before{
	top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
	box-shadow: 0 0 0 rgba(255,255,255,1);
    -webkit-transition: opacity 0.2s, box-shadow 0.2s;
    -moz-transition: opacity 0.2s, box-shadow 0.2s;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-7:hover:before {
    opacity: 1;
    box-shadow: 3px 3px 0 rgba(255,255,255,1);
}

/*Effect-8*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8{
	color: rgba(255,255,255,1);
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8 i{
	color: inherit;
	-webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:hover i{
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:before{
	top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
	box-shadow: 3px 3px rgba(255,255,255,1);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-8:hover:before {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/*Effect-9*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9{
	color: #fff;
	background: rgba(255,255,255,0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:hover{
	background: rgba(255,255,255,0.05);
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}

.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:before{
	top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-9:hover:before {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}

/*Effect-10*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10{
	color: #fff;
	-webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:hover{
	box-shadow: 0 0 0 10px rgba(255,255,255,1);
    color: #fff;
}

.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:before{
	top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-10:hover:before {
	-webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.5;
}

/*Effect-11*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11{
	color: #fff;
	-webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:hover{
	box-shadow: 0 0 0 10px rgba(255,255,255,0.4);
    color: #fff;
}

.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:before{
	top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-11:hover:before {
	-webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}

/*Effect-12*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12{
	color: #fff;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12:hover{
	background: rgba(255,255,255,1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-12:hover i{
	-webkit-animation: toLeftFromRight 0.3s forwards;
    -moz-animation: toLeftFromRight 0.3s forwards;
    animation: toLeftFromRight 0.3s forwards;
}

/*Effect-13*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13{
	color: #fff;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13:hover{
	background: rgba(255,255,255,1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-13:hover i{
	-webkit-animation: toTopFromBottom 0.3s forwards;
    -moz-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}

/*Effect-14*/
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14{
	color: #fff;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14:hover{
	background: rgba(255,255,255,1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}
.uc_icon_hover_effects .uc_icon_holder .uc_icon_box .effect-14:hover i{
	-webkit-animation: toBottomFromTop 0.3s forwards;
    -moz-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}

/*Animations
-------------------------*/

/*spinAround*/
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

/*toRightFromLeft*/
@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

/*toLeftFromRight*/
@-webkit-keyframes toLeftFromRight {
	49% {
		-webkit-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toLeftFromRight {
	49% {
		-moz-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toLeftFromRight {
	49% {
		transform: translate(-100%);
	}
	50% {
		opacity: 0;
		transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}

/*toTopFromBottom*/
@-webkit-keyframes toTopFromBottom {
	49% {
		-webkit-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toTopFromBottom {
	49% {
		-moz-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toTopFromBottom {
	49% {
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}

/*toBottomFromTop*/
@-webkit-keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toBottomFromTop {
	49% {
		-moz-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toBottomFromTop {
	49% {
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
		transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}

X7ROOT File Manager

Editing: uc_icon_hover_effects.css

Upload File

Create Folder