Hover image using bootstrap

Asked

Viewed 813 times

0

I’m trying to apply an effect with Hover, but I’m not getting it. I am using bootstrap 4. I managed to accomplish what I want or almost that, the problem is that appears below and not on the image.

Follows the code:

  .texto{
                padding:20px;
                font-family:Arial;
                text-align:center;
                color:white;
                opacity:0;
                transition: opacity .2s linear;
                background-color:rgba(0,0,0,.7);
            }

            .imagem:hover .texto{
                opacity:1;
            }
<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>teste</title>
    </head>

    <body>

        <!-- Grid row -->
        <div class="row">

            <!-- Grid column -->
            <div class="col-md-12 d-flex justify-content-center mb-5">
        
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="all">Exibir todos</button>
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="1">Granitos</button>
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="2">Quartzo</button>
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="3">Mármores importados</button>
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="4">Superfície artificiais</button>
        
            </div>
            <!-- Grid column -->
      
        </div>
        <!-- Grid row -->
        
        <!-- Grid row -->
        <div class="gallery" id="gallery">
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 2 imagem">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Card image cap">
                <div class="texto"><h2>teste</h2></div>
            </div>
            <!-- Grid column -->
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 1">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 1">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 2">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 2">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->
        
            <!-- Grid column -->
            <div class="mb-3 pics animation all 1">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->
            
            <!-- Grid column -->
            <div class="mb-3 pics animation all 3">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="mb-3 pics animation all 3">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

            <div class="mb-3 pics animation all 3">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="mb-3 pics animation all 4">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="mb-3 pics animation all 4">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

            <div class="mb-3 pics animation all 4">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Card image cap">
            </div>
            <!-- Grid column -->

        </div>
        <!-- Grid row -->


        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <script type="text/javascript">
            $(function() {
                var selectedClass = "";
                $(".filter").click(function(){
                selectedClass = $(this).attr("data-rel");
                $("#gallery").fadeTo(100, 0.1);
                $("#gallery div").not("."+selectedClass).fadeOut().removeClass('animation');
                setTimeout(function() {
                $("."+selectedClass).fadeIn().addClass('animation');
                $("#gallery").fadeTo(300, 1);
                }, 300);
                });
            });
        </script>
    </body>

</html>

I wanted the text to appear when positioning/hovering over the image, only, as I mentioned, the text appears below and not above.

P.S.: I did not resize the image to post here, considering that this is irrelevant to the understanding of the question.

html css twitter-bootstrap bootstrap-4 hover

  • give down vote without saying why?

  • 1

    Lucas, you just pasted all your code. Couldn’t you just tone down the noise and post only what matters? I already say that it seems to me that you did not know how to overlay text and image for lack of CSS knowledge. Take a look at how to do this with position: absolute and position: relative. PS: the downvote is not mine

  • @fernandosavio agree with you, position in this case is the easiest to apply even. About downvote, I didn’t see much reason, sin for explaining more or putting code beyond enough to simulate the problem is better than not putting any code...

  • @fernandosavio se o cara dizer o por qual motivo deu down vote, okay! I wasn’t born knowing, the guy who does this certainly can, but if someone gives a negative vote and doesn’t say where I’m going wrong (I don’t say in the code but in the questions), I won’t be able to correct, just this, criticism without feedback. Thanks for the comment, I’ll edit my question.

  • 1

    Lucas, it sucks getting downvote but it doesn’t shake you, sometimes it’s really unfair.

1 answer

2


Cara has several ways to align this, but only with the classes of BS4 you can solve virtually everything, you need mainly puts the class card-img-overlay in the text container, and place the class position-relative in the parent container, then with the Flex helpers classes of BS4 itself you centralize everything. Here you can see the documentation https://getbootstrap.com/docs/4.0/components/card/#image-overlays

inserir a descrição da imagem aqui

.texto {
    font-family: Arial;
    text-align: center;
    color: white;
    opacity: 0;
    transition: opacity .2s linear;
    background-color: rgba(0, 0, 0, .7);
}

.imagem:hover .texto {
    opacity: 1;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<!-- Grid column -->
<div class="mb-3 pics animation all 2 imagem position-relative">
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" alt="Card image cap">
    <div class="texto card-img-overlay position-absolute d-flex justify-content-center align-items-center">
        <h2>teste</h2>
    </div>
</div>

Only with BS4 classes

Bootstrap 4, inside the CARD component has a Card-Overlay option, where you can put a text over the image. If you want to put the text the way you want, without too much CSS, you can start from this template. 

.card:hover .card-img-overlay {
  display:flex !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            <div class="card bg-dark text-white">
                <img class="card-img w-100" src="https://unsplash.it/100/100" alt="Card image">
                <div class="card-img-overlay d-none justify-content-center align-items-center flex-column text-center">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

  • I’ll leave the hint not to assign value to top, so the text box gets the natural size it should have.

  • I was looking at the documentation and I’ll leave the link here because Bootstrap comes with helper classes for position.

  • @fernandosavio sim tem position nos helpers, I’m only evaluating how to align, but it should be possible. I’m testing, thanks to the tip ;)

  • @fernandosavio looks inside the BS4 native class to overlay :D http://prntscr.com/p8e7rf

  • @hugocsl man, I’m trying to do like you did above, but I’m not getting it. I noticed that you are using another version of jQuery and Bootstrap, it will be this?

  • Putz... it’s not like you have!? Look here!

  • @fernandosavio yes, had mentioned this link in the rss response

  • 1

    @Lucasinácio guy has nothing to do with jQuery, note my answer that even jQuery I indexed in the snippet with the code of my answer. It’s all with CSS and jQuery or qq other JS has no sense to mess up the formatting. There must be another CSS that you did messing you up

  • where can I send the full gallery css?

  • Publish in Codepen or https://jsfiddle.net/ but try to make a insolated model, only in an image, without the gallery, to see if you understand better what was done, and if it works right. It takes out other css that you did n hand or something like that, because only with the CSS of the BS it is all right... as you can see there aciima

  • I’ll do that, but I need it to work with the gallery.

  • 1

    What an animal, I didn’t see. hauehauehua

  • @hugocsl I ended up doing it in the hand, it was more expensive, but I think it was much more beautiful and customized. On the other hand, vlw by the tips that, I ended up using elsewhere in the project. abs!

  • 1

    @Lucasinácio glad to have helped, thanks for the force, abs

Show 9 more comments

Browser other questions tagged html css twitter-bootstrap bootstrap-4 hover

You are not signed in. Login or sign up in order to post.