Ir ao conteúdo
  • Cadastre-se

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


Posts recomendados

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>

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!