Bootstrap Snippet Box text image hover 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
 <div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="boxing">
                <img class="img-responsive" src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt="">
                <div class="box-content">
                    <div class="content">
                        <h3 class="title">Hale Nur Çalışkan</h3>
                        <span class="post">Front End Developer</span>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-search"></i></a></li>
                            <li><a href="#"><i class="fa fa-link"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> 
        <div class="col-md-4 col-sm-6">
            <div class="boxing">
                <img class="img-responsive"  src="https://img-s1.onedio.com/id-54c6b5e2c94e49b748a0e97e/rev-0/w-635/listing/f-jpg-webp/s-fbf17e1da9eeb5220adf64301c400d788d45888c.webp" alt="">
                <div class="box-content">
                    <div class="content">
                        <h3 class="title">Hale Nur Çalışkan</h3>
                        <span class="post">Front End Developer</span>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-search"></i></a></li>
                            <li><a href="#"><i class="fa fa-link"></i></a></li>
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
.boxing{ 
    overflow: hidden;
    position: relative;
}
.boxing:before{
    content: '';
    background-color: rgba(255,255,255,0.8);
    border-radius:5px;
    box-shadow:0 2px 5px #000;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1; 
    transform: rotateY(90deg) translate(50%, 0) scale(0.5);
    -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
    -moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
    -ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
    -o-transform: rotateY(90deg) translate(50%, 0) scale(0.5); 
    transition: 1s ease;
}
.boxing:hover:before{
    left: 15px;
    right: 15px;
    bottom: 15px;
    top: 15px;
    opacity: 1;
    animation:bounce-left 1s ease-in forwards;
}
.boxing img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease 0s;
}
.boxing:hover img{ transform: scale(1.5); }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Box text image hover"
Bootstrap 4.1.1 Snippet by halenurcaliskan

Related: See More

Questions / Comments:

"Box text image hover" Bootstrap 4.1.1 Snippet by halenurcaliskan

Related: See More

Questions / Comments:

"Box text image hover"
Bootstrap 4.1.1 Snippet by halenurcaliskan