Basic Hover Effect Cards

Simple Yet Effective Hover Transitions

These basic hover effect cards demonstrate smooth transitions and elegant animations. Hover over each card to see the effects in action.

Slide Up Effect

This card reveals content with a smooth slide-up animation when you hover over it.

Fade In Effect

Content fades in gradually when you hover over this card.

Scale Effect

This card slightly scales up on hover, creating a subtle zoom effect.

Shadow Effect

A gentle shadow appears when hovering over this card.

Color Transition

Background color transitions smoothly on hover.

Border Effect

This card's border animates on hover, creating a highlight effect.

How to Create These Cards


                .hover-card-basic {
                    height: 280px;
                    background: rgba(26, 32, 53, 0.7);
                    border-radius: 15px;
                    overflow: hidden;
                    position: relative;
                    transition: all 0.4s ease;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                }
          
                .hover-card-basic:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
                }
          
                .hover-card-basic .card-content {
                    padding: 20px;
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
                    transform: translateY(70%);
                    transition: all 0.4s ease;
                }
          
                .hover-card-basic:hover .card-content {
                    transform: translateY(0);
                }
          
                .hover-card-basic .card-content p {
                    opacity: 0;
                    transition: all 0.4s ease;
                }
          
                .hover-card-basic:hover .card-content p {
                    opacity: 1;
                }