Bootstrap Snippet Image overlay 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--speaker section-->
<div class="container">
    <div class="heading1 mt80 text-center">
        <p>SEE WHAT'S ALL ABOUT</p>
        <h1>Speakers</h1>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-4 mtx">
                <div class="speaker-image">
                    <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" class="img-responsive" />
                        <div class="img_bann_content">
                            <div class="speaker-content">
                                <h4>Speaker Name</h4>
                                <h5>Speaker Title</h5>
                            </div>
                        </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
.speaker-image:hover .img_bann_content {background:#7f66ff;transition: all 0.4s ease-in-out;opacity:0.8;}
.speaker-image:hover .speaker-content {background:#000;color:#fff;z-index:1;}
.speaker-content{width:191px;height:67px;background:#7f66ff;padding-left:21px;transition:all 0.5s ease-in-out;position:absolute;transform:translate(-50%,-50%);top:295px;left:150px;}
.speaker-content h4{font-size: 20px;font-weight: 500;color: #ffffff;line-height: 1.2;}
.speaker-content h5{color:#fff;font-size: 14px;font-weight: 400;line-height: 1.2;margin-top: 1px;}
.speaker-image {
    position: relative;
}
img_bann_content {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
}
.speaker-image:hover .img_bann_content {
    background: #7f66ff;
    transition: all 0.4s ease-in-out;
    opacity: 0.8;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image overlay"
Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Image overlay" Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Image overlay"
Bootstrap 3.3.0 Snippet by imsachin