Need help to create an overlay efffect with links in a wrap tag

Question 1

Here's a FIDDLE

I created content div's with id matching to anchor 2nd class attribute to be able to target them with jQuery. You have everything in the Fiddle. If something's unclear feel free to ask.

HTML

<div id="cat_medical" class="content">
   Cat Medical
</div>

<div id="cat_therapy" class="content">
   Cat Therapy
</div>

<div id="cat_food" class="content">
   Cat Food
</div>

...

CSS

#rplan_cat {
  position:relative;
  width:100%;
  float:left;
  margin-top:30px;
}
.content {
  background: #e6e6e6;
  position: absolute;
  display: none;
  top: 50px;
  left: 0;
  width: 100%;
  height: 660px;
  padding: 15px;    
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  color: #4d4d4d;
  cursor: pointer;
}

jQuery

(function($) {
  $('#rplan_cat a').click(function(e) {
    e.preventDefault();
    $('#'+$(this).attr('class').split(' ')[1]).fadeIn(400);
  });
  $('.content').append('<span class="close">X</span>');
  $('.close').on('click',function() {
    $('.content').fadeOut(400);
  });
})(jQuery);

Question 2

Here is a jsFiddle.

These are the basic concepts. Don't want them in a list? that's fine. Use divs or just the a, but note that the DOM traversal might be slightly different.

Also, there are many many more issues with page height and pitfalls to come with actually making this responsive, page scrolling - overflow etc - so be ready for that. (note that the javascript uses jQuery - so you'll need to include that. For future reference, all of that code you posted was useless. The first 4 lines of the html in your case would suffice. See the how bare this jsfiddle is and keep that in mind for next time. Your specific text or logos are of no consequence.

A lot of this hinges on full understanding of positioning. Relative, absolute, fixed, static. Currently I used fixed for the pop-up because if I used absolute, you might make a container relative, which would change everything, so keep that in mind. Understand how relative divs describe boundaries for elements within, that are absolute.

Data attributes would be great here to connect the icon and spotlight, but because you can't go back to see more icons, until you close the first, the specificity was not necessary.

I have an inner-wrapper called .text-w around the pop-up content so that we can have 2 transition effects. Note how I add the class to the outer element, and use that class to target all elements within instead of adding a class to each. This basically changing the context of an area instead of one element. Sass or Stylus would make this much easier to read and write due to it's nesting abilities.

HTML

<ul class="your-list">
    <li>
        <a href="#" class="icon">01</a>
        <div class="spotlight">
            <div class="text-w">
                <h1>Spotlight 01 name</h1>
                <p>bla bla bla</p>
                <button>close this</button>
            </div>
        </div>
    </li>
    <li>
        etc...
    </li>
</ul>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-list {
    list-style: none;
    margin: 0; padding: 0;
}

.your-list li {
    width: 25%;
    float: left;
    border: 1px solid gray;
}

.your-list a {
    display: block;
    background-color: lightgray;
    min-height: 5em;
    padding: 1rem;
}

.your-list .spotlight {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
/* width: 100%;
    height: 100%; */
    width: 0;
    height: 0;
    overflow: hidden;
    background: yellow;
    padding: 0;
    transition: all .5s ease-in-out;
    transition-delay: .2s;
}

.your-list .spotlight .text-w {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.your-list .show-spotlight {
    width: 100%;
    height: 100%;
    background: red;
    padding: 1rem;
    transition: all .5s ease-in-out;
}

.your-list .show-spotlight .text-w {
    opacity: 1;
    transition: opacity .2s ease-in-out;
    transition-delay: .5s;
}

jQuery

$('.your-list .icon').on('click', function() {
    $(this).closest('li').find('.spotlight').addClass('show-spotlight');
});

$('.your-list .spotlight button').on('click', function() {
    $(this).closest('.spotlight').removeClass('show-spotlight');
});

jQuery explained...

/* when .icon is clicked... run this function... */
$('.icon').on('click', function() {
    /* $(this) means... the element the function is based on... 
    so in this case, .icon --- but not all .icon... 
    just the one you clicked... so it's relative to the specific action */
    $(this).closest('li').find('.spotlight').addClass('show-spotlight');
    /* so... with this icon... use closest() to traverse up the DOM tree nodes 
    and find the closest li... then go down the DOM tree and find the nearest .spotlight... 
    and add a class... you could use fadeIn() or something else too. 
    This class is what has the transitions in your CSS */
});

$('.spotlight button').on('click', function() {
    $(this).closest('.spotlight').removeClass('show-spotlight');
    /* when you click the button
    go up the DOM and find the closest .spotlight and remove the class 
    different transitions can happen when you add or remove based on your CSS*/
});

The reason for the DOM traversal, is that you might have stuff in-between this in the future - so .next() is no good.

You can see this CodePen for a more robust example, and the SCSS for it - and a clean way to target and style by list item.