Title: CSS Transition
Last modified: April 4, 2017

---

# CSS Transition

 *  Resolved [powerj](https://wordpress.org/support/users/powerj/)
 * (@powerj)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/)
 * The transition timing on box-shadow isn’t working on the news boxes (and others)
   on the front page of [this site](http://webtree.website/strata/) – I have the
   same code working on other sites so I figure something must be overriding it 
   and I can’t work it out
 *     ```
       /*Front Page News*/
   
         .home .featured-content-latest-news article {
               background-color: $color5;
               padding: 20px 10px;
               transition: box-shadow 1s;
               transition: background-color 1s;
             h2 {
                 height: 40px;
                 margin-bottom: 0;
             }
           }
   
         .home .featured-content-latest-news article:hover {
               box-shadow: 2px 2px 5px RGBA(0,0,0,.2);
               background-color: $color5;
   
           }
       ```
   

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8989314)
 * your CSS selectors might be wrong – for example, the CSS class `.featured-content-
   latest-news` does not exist in the linked web page.
 * try working with a browser inspection tool to find out what selectors to use,
   and what might be formatting the sections.
 *  [Adyfico](https://wordpress.org/support/users/adyfico/)
 * (@adyfico)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8989345)
 * Looks like the class name your going after is: `.featured-content-our-latest-
   articles featuredpost widget featured-content`
 * It might be easier to use the ID:
 *     ```
       #featured-content-2 article {
            ...
       }
       ```
   
    -  This reply was modified 9 years, 1 month ago by [Adyfico](https://wordpress.org/support/users/adyfico/).
 *  Thread Starter [powerj](https://wordpress.org/support/users/powerj/)
 * (@powerj)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8989423)
 * Whoops sorry – css for that site looks like this:
 *     ```
       /*Front Page News*/
   
         .home .news-front {
               background-color: $color5;
             padding-top: 2%;
               transition: box-shadow 1s;
               transition: background-color 1s;
             h2 {
                 height: 2em;
                 padding: 0 10%;
             }
           }
          .home .news-front:hover {
               box-shadow: 2px 2px 5px RGBA(0,0,0,.2);
               background-color: $color5;
   
           }
       ```
   
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8993232)
 * please read, for example, the section ‘Change Several Property Values’ in [https://www.w3schools.com/css/css3_transitions.asp](https://www.w3schools.com/css/css3_transitions.asp)
 *  Thread Starter [powerj](https://wordpress.org/support/users/powerj/)
 * (@powerj)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8993942)
 * Awesome. Thank you so much [@alchymyth](https://wordpress.org/support/users/alchymyth/)
    -  This reply was modified 9 years, 1 month ago by [powerj](https://wordpress.org/support/users/powerj/).

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS Transition’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 5 replies
 * 3 participants
 * Last reply from: [powerj](https://wordpress.org/support/users/powerj/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/css-transition/#post-8993942)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics