Complex Question

Question

I cannot delete the <a href="single-project.html line because it controls another feature in my webpage.  I am trying to copy the code I have in FIGURE 2 where you will see it as highlighted in bold in FIGURE 1 so that I can make a hover option referencing CSS  to change a photo from black and white to color as you will see in FIGURE 2 I reference the CSS code I wrote to accomplish that.  The CSS code is in FIGURE 3. Repeat I cannot delete any part of FIGURE 1?
FIGURE 1
  <!-- jCarousel -->
  <section class="jcarousel recent-work-jc">
   <ul>
            <!-- Recent Work Item -->
    <li class="four columns">
     <a href="single-project.html" class="portfolio-item">
      <figure>
       <img src="images/portfolio/portfolio-05.jpg" alt=""/>
       <figcaption class="item-description">
        <h5>Nature Vs. Zombies</h5>
        <span>2D Games</span>
       </figcaption>
      </figure>
     </a>
    </li>
FIGURE 2
<!-- 960 Container -->
<div class="container">
   <div class="sixteen columns">
    <h3 class="margin add-top"></h3>
   </div>
    <!-- 1/4 Column -->
    <div class="four columns">
     <a href="css/style.css" class="portfolio-item isotope">
      <figure>
       <div class="picture"><img src="images/portfolio/Branding2.jpg" alt="Branding"/><div class="image-overlay-link"></div></div>
       <figcaption class="item-description">
        <h5>Building</h5>
       <span>Creativity & Reinvention</span>
       </figcaption>
      </figure>
     </a>
    </div>
FIGURE 3
.picture img{
filter: grayscale(100%);
-webkit-filter:grayscale(100%);
transition:filter 600ms ease;
-webkit-transition: -webkit-filter 600ms ease;
.picture img:hover {
filter:grayscale(0);
-webkit-filter:grayscale(0);

Answer 1

Think about it for two seconds. Why modify your HTML around your CSS and add redundant elements to the DOM?? It's messy and creates more work for you going forward.
You should always tailor CSS to HTML not the other way round!
If you make a change to the CSS file you have to change 2 lines, to modify your html you will have to change every block? For every image you have added!
Fig3 works because it's selecting the img tag that's wrapped with a .picture div as you don't have picture div in fig 1 it has nothing to select so add one.
  <!-- jCarousel -->
  <section class="jcarousel recent-work-jc">
   <ul>
            <!-- Recent Work Item -->
    <li class="four columns">
     <a href="single-project.html" class="portfolio-item">
      <figure>
<div class="picture">
       <img src="images/portfolio/portfolio-05.jpg" alt=""/>
</div>
       <figcaption class="item-description">
        <h5>Nature Vs. Zombies</h5>
        <span>2D Games</span>
       </figcaption>
      </figure>
     </a>
    </li>