problem with the hover effect with bootstrap images 4

Question

problem with the hover effect with bootstrap images 4

Navigation

#1 by (5 votes)

2

I have a modal image and I want the mouse to be placed in a blue with an opacity I try but the code does not work here

<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>

and the css code

.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;
}

css bootstrap-4

asked by Efrainrodc 21.12.2017 в 02:50

source

1 answer

Pass a list of objects from JavaScript to PHP How the for ... in statement works in javascript

score 5 · Accepted Answer

Your only mistake was your selector, you were selecting

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

When it really should be:

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

Additional I have added a transition so that the effect looks more animated and the user has a better visual experience.

.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>