How to style images in reveal.js?

In version 3.3.0 there is a class Plain which removes border, shadow and background

<img class="plain"  src="myimages.png"/>

The actual problem is that reveal.js has a style which adds a white background at low opacity, a box-shadow, and a border to images as seen below:

.reveal section img { 
    background: rgba(255, 255, 255, 0.12); 
    border: 4px solid #eeeeee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) 
}

So the fix is to override that style with:

.reveal section img { background:none; border:none; box-shadow:none; }

If you just want to remove this effect on specific images instead of turning it off globally in the CSS file, add the following style attribute to your image tag:

<img src="sample.png" style="background:none; border:none; box-shadow:none;">

Tags:

Reveal.Js