CODEWITHSUNDEEP
javascriptcssimage
Sam77
Sam77

Reputation: 103

display one new image over another one with transparency (CSS or JS)

#

I read a lot of codes but apparently, none of them addresses my question here.

Say you have this simple html:

<html>
<head>
</head>
<body>
<div class="aaa" style="display: inline">
<img src="image_aaa.jpg">
</div>
<div class="bbb" style="display: inline;">
<img src="image_bbb.jpg">
</div>
<div class="ccc" style="display: inline">
<img src="image_ccc.jpg">
</div>
</body>
</html>

And you have image1.jpg. All images have the same size.

How can you put image1.jpg OVER image_bbb.jpg with transparency, so that you can still see a little bit of image_bbb.jpg?

The focus of the question is on the OVER. I presume that the transparency could be obtained with a "opacity: 0.30;" in the CSS for instance.

Thanks!

PS: Important: image1.jpg is not in the html code. It must be handled afterwards. So please avoid some solution like:

<div class="aaa" style="display: inline">
<img src="image_aaa.jpg">
<img src="image1.jpg">
</div>

and CSS overlapping. But rather something like this:

<html>
<head>
<script>
((image1.jpg code here if JS used))
</script>
<style>
((or image1.jpg code here if CSS used))
</style>
</head>
<body>
...

PPS: If suitable, you can also use JS for the solution.

(Thanks to @Paulie_D!)

Upvotes: 0

Views: 297

Answers (1)

Bilal Hussain
Bilal Hussain

Reputation: 572

This may help the image is getting inserted using jquery

$(document).ready(function(){
            $('.aaa').append('<img class="myImg2" src="https://wallpapercave.com/wp/wp4473257.jpg">')
        })
.aaa{
            width: 400px;
        }
        .myImg{
            width: 400px;
            position: absolute;
        }
        .myImg2{
            width: 400px;
            position: absolute;
            opacity: .3;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="aaa" style="display: inline">
<img class="myImg" src="https://i.sstatic.net/zMoo4.jpg">

</div>

<div class="ccc" style="display: inline">

</div>
</body>

Upvotes: 1

Related Questions