<div class="container">


  <div class="item" domflag>
    <div class="right">
      <div class="item-image">
        <!-- 1. POINT -->
        <div class="image-point" style="top:5px; left:30px;">
          <div class="point"></div>
          <div class="point-content">
            <div class="close">
              <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                                    <path d="M0 0h24v24H0z" fill="none" />
                                </svg>
            </div>
            <div class="point-image">
              <img src="https://res.cloudinary.com/dw8swjfpf/image/upload/v1469389227/cap_haespo.png" alt="">
            </div>
            <div class="point-details">
              <h3>Hoddy</h3>
              <p>
                Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user.
              </p>
              <a class="btn btn-blue">i want this</a>
            </div>
          </div>
        </div>
        <!-- /1 .POINT -->
        <!-- 2. POINT -->
        <div class="image-point" style="bottom:150px; left:15px;">
          <div class="point"></div>
          <div class="point-content">
            <div class="close">
              <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                      <path d="M0 0h24v24H0z" fill="none" />
                  </svg>
            </div>
            <div class="point-image">
              <img src="https://res.cloudinary.com/dw8swjfpf/image/upload/v1469389227/cap_haespo.png" alt="">
            </div>
            <div class="point-details">
              <h3>Hoddy</h3>
              <p>
                Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user.
              </p>
              <a class="btn btn-blue">i want this</a>
            </div>
          </div>
        </div>
        <!-- /2 .POINT -->

        <img src="https://res.cloudinary.com/dw8swjfpf/image/upload/v1469389170/im2g_zuzotj.png" alt="">
      </div>
    </div>

    <div class="item-description">
      <small> 3 in 1 System </small>
      <h1 class="description-title">Expedition Parka</h1>
      <div class="description-price" data-currency="USD"> 485.00</div>

    </div>

  </div>

</div>
<footer>
  Dribbble shot by
  <a target="_blank" href="https://dribbble.com/shots/2485456-002-Product-Card">Wayne Spiegel</a></footer>

* {
  box-sizing: border-box;
}

$red: #FA4647;
$light-bg: #fefefe;
$yellow: #f3ce2b;
$blue: #046BF8;
body {
  background: $red;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.right {
  width: 364px;
  text-align: center;
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.item {
  padding: 15px 15px 0;
  box-shadow: 0 40px 70px 0 rgba(0, 0, 0, 0.22), 0px 27px 24px 0 rgba(0, 0, 0, 0.2);
  background: $light-bg;
  width: 600px;
  height: 450px;
  border-radius: 4px;
  display: flex;
  .item-image {
    display: inline-block;
    position: relative;
    img {
      display: block;
      max-width: 100%;
    }
  }
  .image-point {
    position: absolute;
    .point {
      &:before {
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }
    .point {
      position: relative;
      //  display: inline-block;
      cursor: pointer;
      height: 18px;
      width: 18px;
      background: $blue;
      border-radius: 100%;
      //animation-fill-mode: forwards;
      animation-name: pulseOut;
      animation-duration: .5s;
      animation-iteration-count: 1;
      &:hover {
        animation-fill-mode: forwards;
        animation-name: pulseIn;
        animation-duration: .5s;
        animation-iteration-count: 1;
      }
      &:before {
        transition: all 0.5s;
        color: white;
        content: "+";
        font-size: 12px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        display: inline;
        left: 50%;
        transform-origin: 50% 50%;
      }
    }
  }
  .item-description {
    padding-top: 52px;
    small {
      text-transform: uppercase;
      font-size: 10px;
      color: #cccccc;
    }
  }
  .description-price {
    font-size: 26px;
    color: $blue;
    position: relative;
    &:after {
      position: absolute;
      content: attr(data-currency);
      font-size: 10px;
    }
  }
  .description-title {
    margin-top: 0;
    position: relative;
    z-index: 5;
    font-size: 34px;
    margin-bottom: 10px;
    &:before {
      content: "";
      height: 8px;
      position: absolute;
      z-index: -1;
      left: 3px;
      width: 60%;
      bottom: 12px;
      background: $yellow;
    }
  }
}

//Pointer
.point-content {
  display: none;
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
  top: 0;
  position: absolute;
  max-width: 400px;
  min-height: 200px;
  background: white;
  display: flex;
  box-shadow: 0 40px 70px 0 rgba(0, 0, 0, 0.22), 0px 27px 24px 0 rgba(0, 0, 0, 0.2);
  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  &.active {
    top: 20px;
    visibility: visible;
    opacity: 1;
    z-index: 99;
  }
  .point-details {
    padding: 15px;
    text-align: left;
    font-size: 12px;
  }
  .point-image {
    padding: 10px 0;
    width: 500px;
    img {}
  }
}

//Button
.btn {
  display: inline-block;
  background: $blue;
  padding: 15px 20px;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.5s;
  bottom: 10;
  text-transform: uppercase;
  &:hover {
    transform: translateY(-2px);
    //box-shadow: 0 40px 70px 0 rgba(0, 0, 0, 0.22),0px 27px 24px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 25px 35px 0 rgba(0, 0, 0, 0.2);
  }
}

footer {
  position: fixed;
  padding: 10px;
  width: 100%;
  bottom: 0;
  left: 0;
  background: black;
  color: white;
  a {
    color: white;
    font-weight: 800;
  }
}

@keyframes pulseIn {
  from {
    
    box-shadow: transparent 0 0 0 0;
  }
  to {
    box-shadow: //0 0 0 5px rgba(108, 99, 255,.40),
    0 0 0 5px rgba(4, 107, 248, .30), 0 0 0 10px rgba(4, 107, 248, .20), 0 0 0 15px rgba(4, 107, 248, .10);
  }
}

@keyframes pulseOut {
  from {
    box-shadow: //0 0 0 5px rgba(108, 99, 255,.40),
    0 0 0 5px rgba(4, 107, 248, .30), 0 0 0 10px rgba(4, 107, 248, .20), 0 0 0 15px rgba(4, 107, 248, .10);
  }
  to {
    box-shadow: transparent 0 0 0 0;
  }
}

$(document).ready(function() {
  //Just for Demo never use jquery like this

  $('.point-content .close').on('click', function(e) {

    $(this).parent().removeClass('active');

  })

  $('.point').on('click', function(e) {
    e.stopPropagation();

    $(this).next().addClass('active');

    /*	$('.image-point').removeClass('active');
    	$(this).parent().addClass('active');*/
    //	$('.item').addClass('open');
  })

})