Bootstrap Snippet hover image 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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="wrapper">
<div class="sa_image-overlay">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMhNx4GCcj9IGSTT5LrvX0GHjWD-hjb7yB-z2N9MZthhlmxwKy" alt="image"/>
  <div class="sa_overlay">
    <div class="sa_text">Hello World</div>
  </div>
</div>
</div>
</body>
</html>
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
*{margin:0; padding:0;}
.sa_image-overlay {
  position: relative;
  width: 284px;
}
.sa_image {
  display: block;
  width: 100%;
  height: auto;
}
.sa_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:red;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform:scale(0);
  transition: .3s ease;
}
.sa_image-overlay:hover .sa_overlay {
  transform: scale(1)
}
.sa_text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover image"
Bootstrap 4.0.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"hover image" Bootstrap 4.0.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"hover image"
Bootstrap 4.0.0 Snippet by Ashwani Rawat