CODEWITHSUNDEEP
reveal.js
eng27
eng27

Reputation: 916

How to style images in reveal.js?

I am now trying to put transparent png image in reveal.js as:

<div class="slides">
    <section>
        <img src="sample.png">
        <p>sample image</p>
    </section>
</div>

where figure "sample.png" is follows.

enter image description here

However, there are:

How can we remove it?

enter image description here

Upvotes: 30

Views: 23523

Answers (5)

klewis
klewis

Reputation: 8389

As long as the CSS rules remain the same, then just create your own class and stick it on any image you see fit.

The HTML:

<img class="plain" data-src="lib/dist/images/cake_top.png">

The StlyleSheet:

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

Upvotes: 0

Yotam
Yotam

Reputation: 10695

Following @cmorrow answer (and the comments), I updated looked into the css file, there is an element .reveal section img.plain which offers what you want but with a slightly opaque background. I edited that element and included 

background: rgba(255,255,255,0.0);

and I have the desired outcome

Upvotes: 0

ulrich
ulrich

Reputation: 3587

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

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

Upvotes: 38

bkimminich
bkimminich

Reputation: 436

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;">

Upvotes: 22

cmorrow
cmorrow

Reputation: 556

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; }

Upvotes: 43

Related Questions