"image hover"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<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="//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 ----------> <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 ----------> <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 speaker-sectiontwo"> <div class="col-md-4 mtx"> <div class="speaker-image"> <img src="https://cdn.beam.usnews.com/dims4/USNEWS/59f1d50/2147483647/thumbnail/970x647/quality/90/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2F28%2F21%2F37a23a5f40048594e7e1209a842d%2F150427-networking-stock.jpg" class="img-responsive" /> <div class="img_bann_content"> <div class="speaker-content"> <h4>Speaker Name</h4> <h5>Speaker Title</h5> </div> </div> </div> </div> <div class="col-md-4 mtx"> <div class="speaker-image"> <img src="https://cdn.beam.usnews.com/dims4/USNEWS/59f1d50/2147483647/thumbnail/970x647/quality/90/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2F28%2F21%2F37a23a5f40048594e7e1209a842d%2F150427-networking-stock.jpg" class="img-responsive" /> <div class="img_bann_content"> <div class="speaker-content"> <h4>Speaker Name</h4> <h5>Speaker Title</h5> </div> </div> </div> </div> <div class="col-md-4 mtx"> <div class="speaker-image"> <a href=""><img src="https://cdn.beam.usnews.com/dims4/USNEWS/59f1d50/2147483647/thumbnail/970x647/quality/90/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2F28%2F21%2F37a23a5f40048594e7e1209a842d%2F150427-networking-stock.jpg" class="img-responsive" /></a> <div class="img_bann_content"> <div class="speaker-content"> <h4>Speaker Name</h4> <h5>Speaker Title</h5> </div> </div> </div> </div> </div> </div> </div> </body> </html>
.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;} .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-sectiontwo{margin-top:30px;}

Related: See More

Rotating CSS Card
Image Crop jQuery
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: