CODEWITHSUNDEEP
cssimagetransparency
Dove Man
Dove Man

Reputation: 147

Make image transparent in CSS

So here is my code, it works fine, but I want the image to be 50% transparent.

 #esc1{ 
 position: absolute; 
 top:30px; 
 right: 0; 
 width: 30px; 
 height: 30px;
 }

So sorry, I posted the wrong code before..

Upvotes: 1

Views: 13080

Answers (5)

mirazimi
mirazimi

Reputation: 880

all image in single-testimonial class transparent in CSS :)

        <style>
 .single-testimonial img{
        opacity: 0.8!important;
    }
</style>
    <div class="single-testimonial">
                                    <div class="col-md-12">
                                        <div class="col-md-6">
                                            <img src="b-2.jpg" />
                                        </div>
                                        <div class="col-md-6">
                                            <h2>Louis Smith</h2>
                                            <p>
                                           برنامه نویسان مریخی
                                            </p>
                                        </div>
                                    </div>

                                </div>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

set opacity to your class for which you want to give transparency.

eg :

#esc1 {
 position: absolute; 
 top:30px; 
 right: 0; 
 width: 30px; 
 height: 30px;
 opacity: 0.5;
 }

you can give opacity with background, too

eg : background : rgba(red_value , green_value , blue_value, alpha_value);

red_value, green_value , blue_value are the combined value for your div background-color. and alpha_value is the opacity value to your div.

Set opacity according to your need.

Note : its value should be between 0 to 1 including 0 and 1.

Hope this helps.

Upvotes: 4

Yogesh Yadav
Yogesh Yadav

Reputation: 65

There are multiple way to achieve this and it is hard to tell which one would be best without looking at your code but one way to do this is through opacity like follow:

opacity: .5

Where .5 is the amount of transparency. .5 is equivalent to 50% transparency.

or If it is background color then you can use:

background-color: rgba(redValue, greenValue, blueValue, alphaVale);

Alpha value varies same as opacity from 0 to 1

Upvotes: 0

Sajan
Sajan

Reputation: 821

for transparent background

 #esc1{ 
 position: absolute; 
 top:30px; 
 right: 0; 
 width: 30px; 
 height: 30px;
 background-color: rgba(255, 255, 255, .5);
 }

for transparent element

 #esc1{ 
 position: absolute; 
 top:30px; 
 right: 0; 
 width: 30px; 
 height: 30px;
 opacity: 0.5;
 }

Upvotes: 1

dylanthelion
dylanthelion

Reputation: 1770

You want to set the opacity property

.myClass { opacity: 0.5 }

Upvotes: 0

Related Questions