Bootstrap Snippet img animation using HTML CSS

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="//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 ---------->
<html>
    <body>
    
        <div class="container">
        
            <div class="logo">
                <a href="http://studiomp4.hol.es/"><img src="http://www.plici.ro/images/logo-1386110275.png" border="0"></a>            </div>
    
            <h1>Image Hover Effects</h1>
    
            <div class="sep">
                <h2>Zoom In & Zoom Out</h2>
            
                <div class="image-hover img-zoom-in">
                    <img src="http://www.plici.ro/images/1-1386110332.jpg">
                </div>
            
                <div class="image-hover img-zoom-out">
                    <img src="http://www.plici.ro/images/2-1386110350.jpg">
                </div>
                
            </div>
            
            <div class="sep">
                
                <h2>Rotate Right & Left</h2>
            
                <div class="image-hover img-rotate-right">
                    <img src="http://www.plici.ro/images/3-1386110366.jpg">
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
/*****************************/
/* Copyright by CreativeDive */
/*****************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600);
/* if use SSL (https://) >>> set the URL Source to https://fonts.googleapis.com/... to load google web-fonts */
/* SHOWROOM CSS */
* {font-family:'Open Sans', sans-serif, Segoe UI light;font-weight:100}
html, body {margin:0px;padding:0px;width:100%;height:100%}
body {background:#d9d9d9 url("icons/background.jpg") repeat-y center top}
body.light, body.light {background:#d9d9d9 url("icons/background.jpg") repeat-y center top!important}
.container {padding:50px;width:990px;margin:0 auto}
.logo {text-align:center;width:100%}
.logo img {text-align:center;margin:0px auto 20px auto;border:0px}
h1, h2, h3 {font-weight:300;width:100%;text-align:center;color:#646464;float:left}
h3 {color:#1787d6}
.color.blue {font-weight:600;color:#1787d6;background:none!important}
.color.grey {font-weight:600;color:#b5b5b5;background:none!important}
.color.green {font-weight:600;color:#509b07;background:none!important}
.color.orange {font-weight:600;color:#d18117;background:none!important}
.color.yellow {font-weight:600;color:#c8a208;background:none!important}
.color.red {font-weight:600;color:#d30100;background:none!important}
.color.purple {font-weight:600;color:#9a0fb8;background:none!important}
.color.pink {font-weight:600;color:#b4039d;background:none!important}
.description {font-weight:300;font-size:20px;margin-bottom:30px;width:100%;text-align:center;color:#646464}
table, .content {border-collapse:collapse;float:left;clear:both;width:100%;margin-bottom:50px;background:#fff;border:10px solid #eee;
box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 1px 8px rgba(0, 0, 0, 0.3)}
td, th {padding:40px 20px 40px 20px;border:1px dotted #ccc;font-size:14px;text-align:center;color:#aaa}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"img animation"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"img animation" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"img animation"
Bootstrap 3.0.0 Snippet by evarevirus