Question

I am doing a picture viewer for my website. There is a problem of opacity with the displayed image. I want my image opacity to 100% and my black background to 80% instead of:

I tried to set opacity directly on my image, but It didn’t work.

I have this jQuery function:

$("img").click(function(event){
        // Create image frame
        $("#imageView").css("width" , $(document).width());
        $("#imageView").css("height" , $(document).height());
        $("#imageView").css("display" , "block");
        $("#imageView").css("opacity" , "0.8");
        $("#imageView").css("background-color" , "black");
        $("#imageView").css("position" , "absolute");
        $("#imageView").css("left" , "0");
        $("#imageView").css("top" , "0");
        $("#imageView").css("z-index" , "9000");
        $("#imageView").css("text-align" , "center");
        
            // Load big picture
        var miniSrc = $(this).attr("src").split("/");
        var imgName = miniSrc[miniSrc.length - 1];
        var bigSrc = "images/big/" + imgName;
        var imgHtml = "<img id='bigImg' src='" + bigSrc + "' alt='' style=\"heigth:200px; width:300px\"/>";
        
        // Insert Picture with animation
        $("#imageView").html(imgHtml);
            
        $("#bigImg").animate({
            height: "400px",
            width: "600px",
        },500);

    });

Imageview is an empty div in my body.

what’s the problem with my css ?

Answer 1

The id="imageView" element cannot have the image as a child – move the image outside.

This is the same pattern jQuery UI uses when popping modal dialogs…