jQuery addClass example

Change class name on click in jQuery

by Ben Watts

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<div class="project">
  <img class="background" src="http://canvascode.azurewebsites.net/Content/Images/Pebmpg/Pebmpg1.png" />
  <div class="hover">

  </div>
  <div class="footer">
    <h1>
      Pebmpg
    </h1>
    <span>Cycle of recycling?</span>
  </div>
</div>

CSS

.project {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #FFF;
}

.project .background {
  width: inherit;
  height: inherit;
}

.project .footer {
  background: rgb(0, 25, 0);
  background: linear-gradient(0deg, rgba(0, 25, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: inherit;
  transition: all ease 0.3s;
  color: #FFF;
  text-shadow: 2px 2px 5px #000;
  font-family: 'Open Sans', sans-serif;
  height: 75px;
}

.project .footer.active{
  opacity: 1;
}

.project .footer h1{
  padding: 3px 9px;
  font-size: 16pt;
  margin: 0;
}

.project .footer span{
  padding: 3px 9px;
  font-size: 12pt;
}

JavaScript

$('.project').on('mouseover', function()
{
	$(this).find('.footer').addClass('active');
});

$('.project').on('mouseout', function()
{
	$(this).find('.footer').removeClass('active');
});