jQuery addClass example

Change class name on click in jQuery - Overlay DIV click event on images

by Suryar Praveen

HTML

<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>
<div class="container">
      <div class="row">
	  <h2>Bootstrap Grid - DIV Overlay</h2>
        <div class="col-xs-6 col-md-3">

		<div class="thumbnail">
		<img src="http://placehold.it/350x150">
		<div class="clearfix"></div>
		<div class="profile">
		<img src="http://placehold.it/100x100" class="pull-left">
		<h4>Marina Jose</h4>
		</div>
		<div class="clearfix"></div>
		<div class="caption">
		<h3>Sr. Technical Manager</h3>
		<p><a class="btn btn-default" href="#">Follows You</a></p>
		<p class="status"><i>Status Comes Here...</i></p>
		</div>
		<div class="hovercaption">
		<div class="center view"><img src="images/eye.svg"></div>
		<div class="pull-left follow"><img src="images/icon.svg"></div>
		<div class="pull-right message"><img src="images/speech-bubbles-comment-option.svg"></div>
		</div>
		</div>
				
		</div>
		<div class="col-xs-6 col-md-3">

		<div class="thumbnail">
		<img src="http://placehold.it/350x150">
		<div class="clearfix"></div>
		<div class="profile">
		<img src="http://placehold.it/100x100" class="pull-left">
		<h4>Marina Jose</h4>
		</div>
		<div class="clearfix"></div>
		<div class="caption">
		<h3>Sr. Technical Manager</h3>
		<p><a class="btn btn-default" href="#">Follows You</a></p>
		<p class="status"><i>Status Comes Here...</i></p>
		</div>
		<div class="hovercaption">
		<div class="center view"><img src="images/eye.svg"></div>
		<div class="pull-left follow"><img src="images/icon.svg"></div>
		<div class="pull-right message"><img src="images/speech-bubbles-comment-option.svg"></div>
		</div>
		</div>
				
		</div>
		
      </div>
    </div>

CSS

.profile img {border: 2px solid #ffffff;box-shadow: 0px 1px 1px 1px #f2f2f2;margin-right: 5%;border-radius: 5px;}
.profile {margin-top: -15%;margin-left: 5%;overflow: hidden;display: flex;vertical-align: middle;align-items: center;}
.caption {margin-left: 2%;}
.hovercaption {position: absolute;background: #000;height: 94%;width: 90%;top: 0;left: 5%;border-radius: 5px;display:none;overflow:hidden;}
.hovercaption img{width:50px; height:auto;}
.view {    text-align: center;}
.follow {    bottom: 5%;    position: absolute;    left: 5%;}
.message {    position: absolute;    bottom: 5%;    right: 5%;}
.thumbnail {    overflow: hidden;}

JavaScript

$(document).ready(function() {
$(".thumbnail").hover(function(){
    $(".hovercaption", this).css({"display": "block","background":"#000"});
}, function(){
    $(".hovercaption", this).css('display','none');
});
});