Bootstrap Snippet Hover Effect With Jumbotron using HTML CSS Bootstrap

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 ---------->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Sacramento&display=swap" rel="stylesheet">
<section>
    <div class="container">
         <div class="row">
              <div class="col-md-6 col-lg-6 col-xl-6">
                    <div class="jumbotron jmb1">
                      <h1>A Bootstrap Guide</h1>
                      <p>Bootstrap is the most popular HTML, CSS...</p>
                    </div>
              </div>
              <div class="col-md-6 col-lg-6 col-xl-6">
                    <div class="jumbotron jmb2">
                      <h1>A Bootstrap Guide</h1>
                      <p>Bootstrap is the most popular HTML, CSS...</p>
                    </div>
              </div>
         </div>
        <!--second row-->
        <div class="row">
              <div class="col-md-4 col-lg-4 col-xl-4">
                    <div class="jumbotron jmb1">
                      <h1>A Bootstrap Guide</h1>
                      <p>Bootstrap is the most popular HTML, CSS...</p>
                    </div>
              </div>
              <div class="col-md-4 col-lg-4 col-xl-4">
                    <div class="jumbotron jmb2">
                      <h1>A Bootstrap Guide</h1>
                      <p>Bootstrap is the most popular HTML, CSS...</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.jmb1:hover {
          transform: scale3d(1.1, 1.1, 1.1);
          transition: 0.2s ease-out;
          background-color: linear-gradient(yellow,green);
          background-image: linear-gradient(45deg, #17a2b8, #007bffb8,#ffffffc9);
          color: white;
          text-shadow: 2px 2px 2px black;}
      .jmb2:hover {
          transform: scale3d(1.1, 1.1, 1.1);
          transition: 0.2s ease-out;
          background-color: linear-gradient(yellow,green);
          background-image: linear-gradient(45deg, #17a2b8, #007bffb8,#ffffffc9);
          color: white;
          text-shadow: 2px 2px 2px black;}
      .jumbotron h1 {
          font-family: 'Sacramento', cursive;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover Effect With Jumbotron"
Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Hover Effect With Jumbotron" Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Hover Effect With Jumbotron"
Bootstrap 4.1.1 Snippet by anjalish