Bootstrap Snippet Text show on hover and background Zoom 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="//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 ---------->
  <div class="flex-grid featured-content">
      <div class="grid-item">
         <div class="grid-item-wrapper">
              <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1484036218807-91efe1baff2f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f2ddcac446186aaf34590666d33e85a9&auto=format&fit=crop&w=1350&q=80')"></div>
              <div class="grid-item-content">
                    <div class="grid-item-content-details">
                         <h4 class="grid-title">Graphic Design</h4>
                         <div class="grid-details">Graphic design is the process of visual communication and problem-solving using one or more of typography, photography and illustration to create visual compositions.</div>
                    <div class="grid-action">
                         <div class="btn btn--clear">Read More</div>
                    </div>
              </div>
         </div>
      </div>
      <div class="grid-item">
         <div class="grid-item-wrapper">
              <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a00dd14dd25d32b799b8e6e0270fd535&auto=format&fit=crop&w=1352&q=80')"></div>
              <div class="grid-item-content">
                    <div class="grid-item-content-details">
                         <h4 class="grid-title">Creative Design</h4>
                         <div class="grid-details">Graphic design is the process of visual communication and problem-solving using one or more of typography, photography and illustration to create visual compositions.</div>
                    <div class="grid-action">
                         <div class="btn btn--clear">Read More</div>
                    </div>
              </div>
         </div>
      </div>
      <div class="grid-item">
         <div class="grid-item-wrapper">
             <div class="grid-item-bg-img" style="background-image:url('https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=08bcfbcc8c59a469f6a438a595886e4d&auto=format&fit=crop&w=1249&q=80')"></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
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: stretch;
}
.flex-grid .grid-item-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.flex-grid .grid-item {
  width: 100%;
  padding: 1rem;
  position: relative;
}
.flex-grid .grid-item h4 {
  margin-bottom: .5rem;
  margin-top: 0;
  font-weight: 400;
}
.flex-grid .grid-item-bg-img {
  position: relative;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: sepia(0.3) saturate(0.8);
  -webkit-filter: sepia(0.3) saturate(0.8);
}
.flex-grid.featured-content .grid-item-wrapper {
  overflow: hidden;
}
.flex-grid.featured-content .grid-item-wrapper .grid-item-bg-img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text show on hover and background Zoom"
Bootstrap 4.0.0 Snippet by webcoderskull

Related: See More

Questions / Comments:

"Text show on hover and background Zoom" Bootstrap 4.0.0 Snippet by webcoderskull

Related: See More

Questions / Comments:

"Text show on hover and background Zoom"
Bootstrap 4.0.0 Snippet by webcoderskull