How do I pop buttons on top of my div?

Question

Good afternoon, I have a div made with bootstrap and css and I want that when you hover over, appear two buttons right in the middle of this div. My idea is the following, I have several Ivs containing articles and when you hover over you have to appear two buttons, one to edit the article and one to delete.

I can not do anything, I’m not very good with css and the tutorials I think none is specific to this and many use Ivs with position Absolute and this Uga all my page.

The HTML of the page looks like this:

<?php include_once './template/header.php'; ?>
<div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" id="artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
</div>
<?php include_once './template/footer.php'; ?>

These are several sample articles that I want to appear on the page and all with the effect of showing the button in front.

A lot of css is bootstrap, but it has a little done by me too:

.panel-artigo:hover{  
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

Screenshot of how my page looks:

Answer 1

You can wear something like that:

.panel-artigo {
    position:relative; //Importante para que os botões estejam centralizados
}
.meus-botoes {
    display:none; //garante que o botão não apareça na tela
    margin:0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.panel-artigo:hover .meus-botoes {
    display:block; //Exibe os botões somente com o hover
}

And your html:

<a href="#" style="display:block; text-decoration: none; color: #000">
    <div class="panel panel-default col-md-4 panel-artigo">
        <div class="meus-botoes">
            <!-- insira o html dos botoes aqui -->
        </div>
        <div class="panel-body">
            <div class="panel-header">
                <h1 style="margin-top: 0px">Titulo 1</h1>
            </div>
            <p>
                Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                embaralhou para fazer um livro de modelos de t...
            </p>
        </div>
    </div>
</a>

Would that be?

Answer 2

Since you already have a css response, I’ll post one using jQuery just to have another way to do it.

First let’s create the buttons on each div, thus:

<div class="divButton" id="">    
       <button class="btn-primary">Olá</button>
</div>

Note that the div has the class divButton. She is responsible for keeping the button hidden (display: none) and is doing the alignment, which you should fit into the shape you want. This class is as follows:

.divButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     margin-top: 20%;
    text-align: center;  
    display: none; 
}

Now that we already own the button in place and hidden, let’s just show the same with jQuery.

$('.panel-artigo').mouseenter(function(){
    jQuery(this).find('.divHide, .divButton').fadeIn();
}).mouseleave(function(){
    jQuery(this).find('.divHide, .divButton').fadeOut();
});

This code is responsible for showing and hiding the buttons by hovering the mouse div.

Your complete code would look like this:

$('.panel-artigo').mouseenter(function(){
    jQuery(this).find('.divHide, .divButton').fadeIn();
}).mouseleave(function(){
    jQuery(this).find('.divHide, .divButton').fadeOut();
});

.panel-artigo:hover{  
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.divButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     margin-top: 20%;
    text-align: center;  
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" id="artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
              Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
           Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
        Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">       
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
               Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">       
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
</div>

Follows a Example in Jsfiddle.

Answer 3

Taking advantage of the two good answer above I put a code for
complete the answers as you can pick up the values of the buttons to know which article is editing

Note: The loop of repetition is and only to illustrate because I believe that these articles come from the database, instead of for you can go through the article array of the database and in place of the value of the buttons you put their id or code.

I did in c#, then just switch to php.

<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.min.js"></script>

<style>       
     .panel-artigo {
        position: relative;           
    }

    .meus-botoes {   
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<script type="text/javascript">

    $(document).ready(function () {
        $(document).on('mouseenter', '.minhaDiv', function () {
            $(this).find(":button").show();

        }).on('mouseleave', '.minhaDiv', function () {
            $(this).find(":button").hide();
        });


        $(".Gravar").click(function (e) {
            alert($(this).attr("value"));
        });

        $(".Deletar").click(function (e) {
            alert($(this).attr("value"));
        });
    });

</script>

</head>
<body>
<form id="form1" runat="server">

    <div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">

        <% for (int i = 1; i < 10; i++)
            {%>

        <div class="minhaDiv">
            <a href="#" style="display: block; text-decoration: none; color: #000">
                <div class="panel panel-default col-md-4 panel-artigo">
                    <div class="meus-botoes">
                        <button type="button" class="btn btn-success Gravar" style="display: none;" value="<%=i%>">Gravar</button>
                        <button type="button" class="btn btn-danger Deletar" style="display: none;" value="<%=i%>">Deletar</button>
                    </div>
                    <div class="panel-body">
                        <div class="panel-header">
                            <h1 style="margin-top: 0px">Titulo 1</h1>
                        </div>
                        <p>
                            Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                                utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                                embaralhou para fazer um livro de modelos de t...
                        </p>
                    </div>
                </div>
            </a>

        </div>

        <%  } %>
    </div>
</form>