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?
Asked
Active
Viewed 94 times
1 Answers
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

Alejandro Teixeira Muñoz
- 2,758
- 1
- 22
- 31
-
The link was also very helpful. – Tyler Rinker May 16 '15 at 14:22
-
1Remember that!! -> Always look for a way to use specificity before even considering !important. – Alejandro Teixeira Muñoz May 16 '15 at 22:39