CSS Transition

  • Resolved powerj

    (@powerj)


    7 years, 11 months ago

    The transition timing on box-shadow isn’t working on the news boxes (and others) on the front page of this site – 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)

  • 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.

    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 7 years, 11 months ago by Adyfico.
    Thread Starter powerj

    (@powerj)

    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;

    }

    please read, for example, the section ‘Change Several Property Values’ in https://www.w3schools.com/css/css3_transitions.asp

    Thread Starter powerj

    (@powerj)

    Awesome. Thank you so much @alchymyth

    • This reply was modified 7 years, 11 months ago by powerj.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Transition’ is closed to new replies.

Tags