Don't dim slide content when not active

Question

I am using impress.js for the first time and wanted to make a tweak. The original demo SEEN HERE has the slides become dim/transparent when they are not active. I have seen another impress.js presentation SEEN HERE where the image/slides remain opaque throughout the presentation except on the first slide (after that everything become opaque). How can I make a particular slide or image stay opaque through out the presentation?

Answer 1

in your css adding

.future : { opacity: 1.0 !important;}
.past : { opacity: 1.0 !important;} 

or editing impress-demo.css

.impress-enabled .step {
  margin: 0;
  opacity: 0.3; <---  CHANGE THIS
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

will change the opacity for different steps

Anyway, you can find the elements ,and choose the one u want and make a .css with jquery, for example:

$("body").find(".future")[0].css("opacity","1.0"); <-- This will change just the first future step found

Anyway, please read about css rules and specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Hope it helps

EDIT

I though u may also want to use :firs-child or :after (CSS selectors) will can also help you: http://quirksmode.org/css/selectors/firstchild.html http://www.w3schools.com/cssref/sel_after.asp