reverse image rollover visibility

• 

  laurenmeranda · Member · Jun 2, 2014 at 7:18 pm

  • Copy link
  • Add topic to favorites

  I cannot find the css to change the entry-thumbnails to start with the post information shown and then have the information and opacity hidden on hover. It’s currently set in reverse where it starts hidden and is revealed on hover. Any suggestions on how to change this?

  The blog I need help with is: (visible only to logged in users)

• 

  therealisabisa · Member · Jun 2, 2014 at 11:20 pm

  • Copy link

  Hi there,

  I see you already have this:

  .blog .entry-header, .archive .entry-header, .search-results .entry-header {
    opacity: 1;
  }

  Try adding this too:

  .blog .hentry:hover .entry-header, .archive .hentry:hover .entry-header, .search-results .hentry:hover .entry-header {
    opacity: 0;
  }

  To animate it, you can change the first block of code to:

  .blog .entry-header, .archive .entry-header, .search-results .entry-header {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
  }

  I hope that helps!