Bootstrap Snippet Bootstrap thumbnail hover using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <div class="thumbnail">
                    <div class="frow">
                        <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">Edit</a>
                        <a href="#" class="btn btn-danger btn-sm pull-right">Delete</a>
                    </div>
                    <div class="secrow">
                        <div class="caption">
                            Gwapo Alright!
                        </div>
                        <img src="http://2.bp.blogspot.com/-KeE6_FqMIdQ/UiAiISyFPkI/AAAAAAAAAMk/wHlSFs9VE5U/s1600/388686_10150397393158915_161162533914_8531679_552579994_n_large.jpg" alt="" class="img-responsive">
                    </div>
                    <div class="thirdrow">
                        <textarea name="type" rows="3" onclick="this.focus();this.select()" class="form-control" readonly="">click me to copy</textarea>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="thumbnail">
                    <div class="frow">
                        <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">Edit</a>
                        <a href="#" class="btn btn-danger btn-sm pull-right">Delete</a>
                    </div>
                    <div class="secrow">
                        <div class="caption">
                            Gwapo Alright!
                        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.container{
        
    }
    .row{
        
        margin-top: 50px;
    }
    .thumbnail,textarea{
        border-radius: 0;
        overflow: hidden;
    }
.caption {
    position:absolute;
    bottom:0;
      right:0;
    background: rgba(0, 0, 0, 0.57);
    width:100%;
    height:45%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}
    textarea{
        resize:none;
    }
    .thumbnail{
        position: relative;
        border: 1px solid #BDC3C7;
        
        padding: 10px;
        margin: 5px;
        background-color: #EAEDF2;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    $( document ).ready(function() {
    $(function () {
        $('.mm_tooltip').tooltip({
            selector: "[data-toggle=tooltip]",
            container: "body"
        })
    });
 
    $('.thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(300); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(200); //.fadeOut(205)
        }
    ); 
    
    $('#btndel').on('click', function(){
        alert('Are you sure you want to delete');
        
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap thumbnail hover"
Bootstrap 3.3.0 Snippet by leonizZ

Related: See More

Questions / Comments:

"Bootstrap thumbnail hover" Bootstrap 3.3.0 Snippet by leonizZ

Related: See More

Questions / Comments:

"Bootstrap thumbnail hover"
Bootstrap 3.3.0 Snippet by leonizZ