Bootstrap Snippet image hover_chageing effects.... using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<div class="beforeandafter">
 
    <div class="before">
    <img class="img-responsive"  src="https://www.playdnl.com/upload/2017/0720/598d283f170f8ee2bb90e4ecc7c47c5409c72fdd.jpeg"/>
     </div>
 
    <div class="after">
    <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="700px" />
    </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
<style type="text/css">
    
    div.beforeandafter{ /* main container */
    background: white;
    border: 1px solid gray;
    display: block;
    width: 600px; /* width of largest image width */
    height: 400px; /* height of largest image height */
    overflow: hidden;
    position: relative; /* important */
}
div.before, div.after{ /* before and after DIVs within main container */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
    transition: all 1s ease-in-out; /* CSS transition. */
    z-index: 100;
}
 
div.after{
    z-index: 1; /* z-index of after div should be smaller than before's */
}
div.beforeandafter:hover div.before{
    width: 0;
    opacity: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"image hover_chageing effects...."
Bootstrap 4.0.0 Snippet by manoj90134

Related: See More

Questions / Comments:

"image hover_chageing effects...." Bootstrap 4.0.0 Snippet by manoj90134

Related: See More

Questions / Comments:

"image hover_chageing effects...."
Bootstrap 4.0.0 Snippet by manoj90134