Bootstrap Snippet CSS3 Fly-in Transition for Pictures using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="grid mask">
                        <figure>
                            <img src="http://placehold.it/300/fff.png" alt="canvas" class="img-responsive" id="animate"> 
                            <figcaption>
                                <h5>Erlebnis</h5>
                                
                            </figcaption><!-- /figcaption -->
                        </figure><!-- /figure -->
                    </div><!-- /grid-mask -->
    </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
#animate{
    transition: all 1s ease;
    
 }
 
.row{
    max-width:20em; !important;
    padding:10px;
     background:black;
     position:relative;
     }   
#animate:hover{
        opacity:.5;
       
        }    
#animate:hover+figcaption{
     opacity:.7;
    top:1.2em;;
     left:1.2em;
     box-shadow:0px 1px 12px black;
        }    
        
.row#animate:hover{
        background:black;
    } 
    
figcaption{
    position:absolute;
    top:-1em;
    left:0;
    padding:2em;
    color:black;
    background:white;
    opacity:0;
   border-radius:1em;
    transition:all .5s ease-in-out;
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS3 Fly-in Transition for Pictures"
Bootstrap 3.2.0 Snippet by Marnoweb

Related: See More

Questions / Comments:

"CSS3 Fly-in Transition for Pictures" Bootstrap 3.2.0 Snippet by Marnoweb

Related: See More

Questions / Comments:

"CSS3 Fly-in Transition for Pictures"
Bootstrap 3.2.0 Snippet by Marnoweb