jQuery addClass example

Change class name on click in jQuery

by Victor

HTML

<div class="cards">
  <div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
<div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
<div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
<div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
<div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
<div class="card">
  <div class="card__top">&hearts; 120 • &#128172; 30</div>
  <div class="card__bottom">
    <h2>Amazon Goes To Space</h2>
    <span>By A. Neville &bull; Apr. 30, 2018</span>
  </div>
</div>
</div>

SCSS

.cards {
  display: flex;
  padding: 1rem;
  flex-wrap: wrap;
  .card {
    margin-right: 1%;
    margin-bottom: 1%;
    &:nth-child(3) {
      margin-right: 0;
    }
  }
}
.card {
  font-family: sans-serif;
  background-color: blue;
  color:white;
  max-width: 32.33%;
  min-height: 200px;
  flex-direction: column;
  display: flex;
  border-radius: 10px;
  /* margin: 1rem; */
  background-image: url('//lorempixel.com/400/200/technics/1/');
  position: relative;
  overflow: hidden;
  
  &:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,eacf04+100 */
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ff3019 0%, #eacf04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ff3019 0%,#eacf04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ff3019 0%,#eacf04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#eacf04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: '';
opacity: 0.5;
  }
  &:after {
    content: '';
    background: #444;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
  }
  &__top {
    flex: 1;
    padding: 1rem;
    font-size: 12px;
    z-index: 2;
  }
  &__bottom {
    /* background: red; */
    flex: 0;
    align-content: flex-end;
    padding: 1rem;
    z-index: 2;
    
    h2 {
      
      font-weight: bolder;
      font-size: 1.333rem;
    }
    span {
      font-size: 10px;
    }
  }
}