"Image overlay"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<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> </div> </div> <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> </div> </div> <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> </div> </div> </div> </div> </div> </body> </html>
.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; }

Related: See More

Rotating CSS Card
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: