jQuery addClass example

Change class name on click in jQuery

by Misha Drobot

HTML

<div class="tri">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>

CSS

.one {
-webkit-clip-path: polygon(50% 50% 0 100%, 100% 100%);
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
background:url('https://pbs.twimg.com/profile_images/793021684064419840/RjEjM6z5_400x400.jpg');
background-size:cover;
width:600px;
height:50%;
position:absolute;

}
.two {
  -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0);
clip-path: polygon(50% 50%, 0 0, 100% 0);
background:url('https://bipbap.ru/wp-content/uploads/2017/04/0_7c779_5df17311_orig.jpg');
background-size:cover;
width:600px;
height:50%;
position:absolute;
top:0;
}
.three {
-webkit-clip-path: polygon(50% 50%, 0 100%, 0 0);
clip-path: polygon(50% 50%, 0 100%, 0 0);

background:url('https://trinixy.ru/pics3/20080124/podb/6/krasota_01.jpg');
background-size:cover;
width:100%;
height:50%;
position:absolute;
left:0;
top:0;
}
.four {
-webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 0);
clip-path: polygon(50% 50%, 100% 100%, 100% 0);

background:url('http://napensii.ua/tools/images/pages/12298812_907612142658133_1860754634_n.jpg_9983_547_1449600706.jpg');
background-size:cover;
width:100%;
height:50%;
position:absolute;
left:0;
top:0;
}
.tri div {
  transition:.3s;
}
.tri div:hover {
  transition:.3s;
  z-index:9999;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.tri {
  width:600px;
  position:relative;
  height:600px;
}