"hover image"
Bootstrap 4.1.1 Snippet by karimsharf12252

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<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-md-3">
<figure class="imghvr-fade">
<img src="https://placeimg.com/300/300/people" class="img-responsive">
<figcaption>
<h1>Hello world</h1>
<p>What is Lorem Ipsum?</p>
<div class="btn-group">
<button type="button" class="btn btn-success">Apple</button>
<button type="button" class="btn btn-default">Samsung</button>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-3">
<figure class="imghvr-push-up">
<img src="https://placeimg.com/300/300/people" class="img-responsive">
<figcaption>
<h1>Hello world</h1>
<div class="btn-group">
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
.col-md-3{
margin-bottom:20px;
margin-top:20px;
height: 200px;
overflow: hidden;
}
@charset "UTF-8";
/*!
* ImageHover.css - http://www.imagehover.io
* Version 1.0
* Author: Ciarán Walsh
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
[class^='imghvr-'], [class*=' imghvr-'] {
position: relative;
display: inline-block;
margin: 0;
max-width: 100%;
background-color: #2266a5;
color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: