2

tengo una imágenes modales y quiero que al pasar el ratón estas se coloquen en un azul con una opacidad lo intente pero no me funciona aquí el código

<main>
    <div class="container">
        <!--            seccion portafolio-->
        <div class="row portafolio">
            <div class="col">
                <h2 class="titulo">Portafolio</h2>
                <div class="row galeria justify-content-center">
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-1.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-8">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-2.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-8">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-3.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-4.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-5.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-6.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="Imagenes/img-7.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

y el código css

.portafolio {
    background: #fff;
    border-top: 5px solid #3da5e2;
    padding: 0 20px;
    margin-bottom: 40px;
}
.portafolio .titulo {
    padding: 40px 0;
    text-align: center;
    color: #3da5e2;
    font-family: 'Open Sans', sans-serif;
}
.portafolio .galeria .contenedor-imagen {
    margin-bottom: 40px;
    max-height: 180px;
    overflow: hidden;
}
.portafolio .galeria .contendor-imagen a {
    display: inline-block;
    background: #3da5e2;
}
.portafolio .galeria .contendor-imagen:hover img {
    opacity: 0.3;
}

1 respuesta 1

5

Tu único error era tu selector, estabas seleccionando

.portafolio .galeria .contendor-imagen:hover img {}

Cuando realmente debería ser:

.portafolio .galeria .contenedor-imagen:hover img{}

Adicional he agregado una transición para que el efecto se vea más animado y el usuario tenga una mejor experiencia visual.

.portafolio {
    background: #fff;
    border-top: 5px solid #3da5e2;
    padding: 0 20px;
    margin-bottom: 40px;
}
.portafolio .titulo {
    padding: 40px 0;
    text-align: center;
    color: #3da5e2;
    font-family: 'Open Sans', sans-serif;
}
.portafolio .galeria .contenedor-imagen {
    margin-bottom: 40px;
    max-height: 180px;
    overflow: hidden;
}
.portafolio .galeria .contenedor-imagen a {
    display: inline-block;
    background: #3da5e2;
}

.portafolio .galeria .contenedor-imagen img{
    transition: opacity 0.8s;
}

.portafolio .galeria .contenedor-imagen:hover img {
    opacity: 0.3;
    transition: opacity 0.8s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<main>
    <div class="container">
        <!--            seccion portafolio-->
        <div class="row portafolio">
            <div class="col">
                <h2 class="titulo">Portafolio</h2>
                <div class="row galeria justify-content-center">
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-8">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-8">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-12 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                    <div class="contenedor-imagen col-6 col-lg-4">
                        <a href="#" data-toggle="modal" data-target="#modal">
                            <img src="https://estaticos.muyinteresante.es/uploads/images/article/58c11b6f5cafe85c71d4608e/polvo-estrellas_0.jpg" class="img-fluid imagen" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.