Let's say you want to showcase the best features of your new app, and you want users to learn what your app is capable of right from the design screens. A possible approach is by using points of interest, accordingly distributed over the design preview. The main advantage is that people will get familiar with some of your product features even before starting to use them. A great example is the Disqus Websites page.

👋 A new version of this component is available. Download now →.

Creating the structure

The structure for our interest points is an unordered list inserted inside our image wrapper:

<div class="cd-product cd-container">
   <div class="cd-product-wrapper">
      <img src="img/cd-app-image.jpg"><!-- image of our product -->
      <ul>
         <li class="cd-single-point">
            <a class="cd-img-replace" href="#0">More</a>
            <div class="cd-more-info cd-top"> <!-- 4 classes available: cd-top, cd-bottom, cd-left, cd-right  -->
               <h2><!-- Title here --></h2>
               <p><!-- Description here --></p>
               <a href="#0" class="cd-close-info cd-img-replace">Close</a>
            </div>
         </li> <!-- .cd-single-point -->

         <!-- other points of interest here -->
      </ul>
   </div> <!-- .cd-product-wrapper -->
</div> <!-- .cd-product -->

Adding style

First, we assigned a position to each .cd-single-point list item:

.cd-product-wrapper {
  position: relative;
}

.cd-single-point {
  position: absolute;
}

.cd-single-point:first-child {
  bottom: 40%;
  right: 30%;
}
.cd-single-point:nth-child(2) {
  bottom: 24%;
  right: 46%;
}
/*define here all the other list items position values*/

We used percentage (rather than px) so that the points of interest preserve their position irrespective of the screen size.

For the pulse effect, we  created an ::after pseudo element for each .cd-single-point list item and animated its box-shadow and scale value using a CSS3 animation. We set the animation-iteration-count to infinite so that the animation is played continuously.

.cd-single-point::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: cd-pulse 2s infinite;
}

@keyframes cd-pulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}

In order to show the info about the interest point (.cd-more-info element), we add the .is-open class to the .cd-single-point item when it's clicked (using jQuery).
On mobile phone devices (screen width< 600px), the .cd-more-info element is opened as a full screen view (with a smooth scale effect achieved adding a CSS3 transition to the scale property).
On larger screens, instead, we set a fixed width and height for the .cd-more-info element. We also defined 4 classes (.cd-top, .cd-bottom, .cd-left and .cd-right) that have to be assigned to the .cd-more-info element in order to open it, respectively, on top, bottom, left or right of the .cd-single-point list item.

.cd-single-point .cd-more-info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point.is-open .cd-more-info {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}

@media only screen and (min-width: 600px) {
  .cd-single-point .cd-more-info {
    position: absolute;
    width: 220px;
    height: 240px;
  }
}

Events handling

We used jQuery to listen to the click events on the .cd-single-point list items and add/remove the is-open class consequently.