Cards Efeito 3D Hover

Classes utilizadas

				
					containerCards
card
				
			

Código CSS

				
					.containerCards{
    perspective: 1000px;
    transform-style: preserve-3d;
}

.card{
    filter: brightness(.1);
    transition: all .6s
}

.card:hover{
    filter: brightness(1);
    transform: translateZ(200px)
}

.card:hover + *{
    filter: brightness(.7);
    transform: translateZ(150px) rotateY(40deg)
}

.card:hover + * + *{
    filter: brightness(.5);
    transform: translateZ(70px)  rotateY(20deg)
}

.card:hover + * + * + *{
    filter: brightness(.3);
    transform: translateZ(30px)  rotateY(10deg)
}

.card:has( + *:hover){
     filter: brightness(.7);
    transform: translateZ(150px) rotateY(-40deg)
}

.card:has(+ * + *:hover){
     filter: brightness(.5);
    transform: translateZ(70px) rotateY(-20deg)
}

.card:has(+ * + * + *:hover){
     filter: brightness(.3);
    transform: translateZ(30px) rotateY(-10deg)
}
				
			
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Torne-se um Desenvolvedor de Sucesso!