Bootstrap Snippet simple hover effect-image using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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="hover">
<div class="wraper">
   <img src="https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg">
    <div class="overlay-text">
        <h3>TIGER</h3>
        <P>TIGER</P>
        <A href="#">Read more</A>
    </div>
</div>
</div>
</div>
          <h2 class="ayush">AYUSH THAKUR</h2>
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
.ayush {
    color: red;
    text-align: center;
    width: 100%;
    font-size: 35px;
    position: relative;
    top: 40px;
    left:140px;
    text-shadow: 2px 2px 1px yellow;
}
.hover {
    width: 50%;
    margin: auto;
    display: block;
    overflow: hidden;
    margin-top:50px;
}
.wraper {
    width: 100%;
    float: right;
    position: relative;
    
}
.wraper img {
    width: 50%;
}
.overlay {
    width: 50%;
    text-align: center;
    position: absolute;
    top: 100%;opacity: 0;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    transition: all ease-in-out 0.5s;opacity: 0;
}
.overlay-text {
    position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"simple hover effect-image"
Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"simple hover effect-image" Bootstrap 4.1.1 Snippet by ishu511

Related: See More

Questions / Comments:

"simple hover effect-image"
Bootstrap 4.1.1 Snippet by ishu511