Question

I’m working on creating a WordPress featured posts header for my site, and I seem to have run into a wall. I have 3 featured posts at the top of the page (updated from recently tagged ‘featured’) and I want the images (featured thumbnails) of each post to fade (css3 opacity) when I hover over them. I’m able to make the images fade when they themselves are hovered over, but when I hover over the label (transparent black overlay w/ post title) I want the image to fade as well. They’re called in an unordered list and I would like for hovering on the selector ” to add the style “style=”opacity:.8;” to the images. Here’s an idea of my heirarchy:

  <div id="featured_articles">
     <div class="site_width">
        <ul>
           <li>
               <a href="http://URL.com/Article_1" title="Article 1 Title" rel="nofollow">
                  <img width="315" height="130" src="http://URL.com/Article_1_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 1 Image" title="">                                              
               </a>
               <label>
                  <a href="http://URL.com/Article_1" rel="bookmark">
                      Article 1                                                 
                  </a>
               </label>
            </li>
            <li>
               <a href="http://URL.com/Article_2" title="Article 2 Title" rel="nofollow">
                  <img width="315" height="130" src="http://URL.com/Article_2_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 2 Image" title="">                                              
               </a>
               <label>
                  <a href="http://URL.com/Article_2" rel="bookmark">
                      Article 2                                                 
                  </a>
               </label>
            </li>
            <li class="last">
               <a href="http://URL.com/Article_3" title="Article 3 Title" rel="nofollow">
                  <img width="111" height="130" src="http://URL.com/Article_3_thumbnail.jpg" class="attachment-featured wp-post-image" alt="Article 3 Image" title="">                                              
               </a>
               <label>
                   <a href="http://URL.com/Article_3" rel="bookmark">
                       Article 3                                                 
                   </a>
               </label>
            </li>
         </ul>
      </div>
   </div>

The CSS I have set up for the two different sections (#featured_articles img * #featured_articles img:hover) are here:

  /******
  CSS Stuff
  ******/

  #featured_articles img {
  opacity: 1;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 300ms;
  }

  .bar3 #featured_articles img:hover{
  opacity: .8;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 300ms;
  }

So all in all, I know I need some sort of Javascript/JQuery solution but I have no idea how to make/implement one. It is also important that the added style is contained in its own ‘li’ element so that it doesn’t decrease the opacity of all the featured posts’ images. Thanks to everybody in advance!

UPDATE:
Just thought I should clarify I’m trying to make a featured posts header like the one found at http://www.technobuffalo.com. Notice how his image fades in opacity even when he hovers on the element.

Answer 1

  #featured_articles img {
      opacity: 1;
      -webkit-transition: opacity;
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 300ms;
  }

  .bar3 #featured_articles li:hover img{
      opacity: .8;
      -webkit-transition: opacity;
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 300ms;
  }

is that what you’re looking for?