CSS COMO CRIA UM EFEITO WEB PARA quando por o mouse em uma imagem FICA ASSIM ?

[joaovitorm102]

eles fizeram com bootstrap e jquery porém não conseguir replicar fica as ondinha se mexendo e o efeito aparece como se fosse um fade in quando poe o mouse.

[RodrigoJP]

Boa tarde.

 

cursor='pointer';

 

Link: https://developer.mozilla.org/pt-BR/docs/Web/CSS/cursor

 

Acho que é isso...

[joaovitorm102]

vi que no css tem o overlay

[RodrigoJP]

Ahhh esse efeito não é o pointer que falei... o que coloquei é só o ponteiro do mouse mesmo que muda...

 

[joaovitorm102]

conseguir fazer assim, porém não ficou bom com o html5 e bootstrap e css3
 

<style>
    /* Configuração da imagem e hover */
    .hoverBox {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .hoverBox img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
    
    .dvUvAW .title {
        position: absolute;
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 0.5rem;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .dvUvAW:hover .title {
        opacity: 1;
    }
    
    .dvUvAW .title h3 {
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
    }
    
    .dvUvAW .title p {
        font-size: 0.7rem;
        margin: 0.3rem 0 0;
    }
    
    /* Promo com efeito de hover */
    .dvUvAW .promo {
        position: absolute;
        height: 50%;
        width: 90%;
        background: rgba(243, 112, 50, 0.95);
        bottom: -100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        padding: 1rem;
        flex-direction: column;
        transition: bottom 0.4s ease;
        color: #fff;
        font-size: 0.8rem;
        border-radius: 20px; /* Borda arredondada */
    }
    
    .dvUvAW:hover .promo {
        bottom: 0;
    }
    
    .dvUvAW .promo .icons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    
    .dvUvAW .promo .icons > li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.6rem;
        text-align: center;
    }
    
    .dvUvAW .promo .icons > li > img {
        width: 1.2rem;
        height: 1.2rem;
        margin-bottom: 0.2rem;
    }
    
    .reserve-btn {
        background-color: #fff;
        color: RGB(243, 112, 50);
        padding: 0.3rem 0.8rem;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        font-size: 0.8rem;
        transition: background-color 0.3s ease;
    }
    
    .reserve-btn:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }
    </style>
<!-- Seção de Oportunidades -->
<section class="opportunities my-5">
    <div class="container">
        <h2 class="text-center">OPORTUNIDADES PARA A VIAGEM DOS SEUS SONHOS</h2>
        
        <!-- Carrossel Bootstrap -->
        <div id="opportunitiesCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                
                <!-- Slide 1 (Janeiro a Abril) -->
                <div class="carousel-item active">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="dvUvAW hoverBox">
                                <img src="assets/img/viagem/janeiro.jpg" class="img-fluid" alt="Janeiro">
                                
                                <!-- Título e descrição -->
                                <div class="title">
                                    <h3>Janeiro 2025</h3>
                                    <p>Dias de verão na Bahia para criar novas memórias inesquecíveis!</p>
                                </div>
                                
                                <!-- Promoções e botão -->
                                <div class="promo">
                                    <ul class="icons">
                                        <li>
                                            <img alt="" src="/cardSvg/Card.svg">
                                            <p>Parcelamento<br>em 10 vezes</p>
                                        </li>
                                        <li>
                                            <img alt="" src="/cardSvg/Children.svg">
                                            <p>Até 2 crianças<br>grátis</p>
                                        </li>
                                        <li>
                                            <img alt="" src="/cardSvg/BestPrice.svg">
                                            <p>Melhor<br>Preço</p>
                                        </li>
                                    </ul>
                                    <button class="reserve-btn">RESERVAR</button>
                                </div>
                            </div>
                        </div>
                        <!-- Adicione os outros slides aqui... -->
                    </div>
                </div>

            </div>

            <!-- Controles do Carrossel -->
            <button class="carousel-control-prev" type="button" data-bs-target="#opportunitiesCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#opportunitiesCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Próximo</span>
            </button>
        </div>
    </div>
</section>