:root {
--transition: .3s ease-in-out;}


.zoom-in {
    transition: var(--transition);
}


.zoom-in:hover {
	transform: scale(1.1);
    
}

.zoom-out {
    transition: var(--transition);
}


.zoom-out:hover {
	transform: scale(.9);
}


.rotate-right {
    transition: var(--transition);
}


.rotate-right:hover{
   transform: rotate(45deg);
}

.rotate-left {
    transition: var(--transition);
}

.rotate-left:hover{
   transform: rotate(-45deg);
}


.transparence {
    transition: var(--transition);
}


.transparence:hover {
	opacity:.5;
}



.shading {
    transition: var(--transition);
}

.shading:hover{
    box-shadow:0 0 30px rgb(0 0 0 / 5%);
}



.bordered{
        transition: var(--transition);
        border: 0.125rem solid transparent;
}

.bordered:hover{
    border-color:var(--color2); 
}


.flip-horizontal{
  transition: var(--transition);
}


.flip-horizontal:hover{
   transform: rotateY(180deg); 
}


.flip-vertical{
  transition: var(--transition);
}

.flip-vertical:hover{
    transform: rotateX(180deg);
}