Bootstrap Snippet hover using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js"></script> 
<div class="wrap-thin demo-thin">
      <div class="viewport"> <a href="#"> <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3471/3959900087_48d1107093.jpg" alt="Northern Saw-Whet Owl" /> </a> </div>
      <div class="viewport no-margin"> <a href="#"> <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3645/3478879694_029e078d4d.jpg" alt="Red-shouldered Hawk" /> </a> </div>
      <div class="viewport"> <a href="#"> <span class="dark-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3578/3478189088_1d0503acb1.jpg" alt="Blue-headed Vireo" /> </a> </div>
      <div class="viewport no-margin"> <a href="#"> <span class="dark-background">Wood Thrush <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3630/3486648997_b50b7670d1.jpg" alt="Wood Thrush" /> </a> </div>
</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
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}
.wrap-thin {
    margin: 0 auto;
    width: 921px;
}
.demo-thin {
    margin-top: 15px;
}
a {
    text-decoration: none;
}
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
    border: 3px solid #eee;
    float: left;
    height: 299px;
    margin: 0 9px 9px 0;
    overflow: hidden;
    position: relative;
    width: 450px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
           class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
    display: block;
    position: relative;
}
.viewport a img {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
 $(document).ready(function() {
        $('.viewport').mouseenter(function(e) {
            $(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100);
            $(this).children('a').children('span').fadeIn(200);
        }).mouseleave(function(e) {
            $(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100);
            $(this).children('a').children('span').fadeOut(200);
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"hover" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"hover"
Bootstrap 3.0.0 Snippet by evarevirus