CSS Image Preview

Posted on 2006-05-15
Last Modified: 2013-11-19

I have a on a web page that I have applied css styling to, to get a 75% transparent background. basically I want to be able to click an image, use an onlcick function to call the layer and display the image as full size inside the layer, then click the layer again to close it. Good example of this at:

Just click one of the images.

My current css code:
.image {
      background-color: #8F9BB1;
      height: 100%;
      width: 100%;
      opacity: .5;
      filter: alpha(opacity=75);
      position: absolute;
      left: 0;
      top: 0;
      visibility: visible;

Question by:Rozwaldeo
    LVL 5

    Accepted Solution


    Try this...


    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Hide and Show Image Preview</title>
    <style type="text/css">
    .shadow {
         background-color: #8F9BB1;
         height: 100%;
         width: 100%;
         opacity: .5;
         filter: alpha(opacity=75);
         position: absolute;
         left: 0;
         top: 0;
         visibility: visible;
    <script language="javascript" type="text/javascript">
    function showImage(id){
    document.body.className = 'shadow';

    var img = document.getElementById('image' + id);
    var show = document.getElementById('showImage');

    show.src = img.src;
    show.width = img.width;
    show.height = img.height; = (screen.height/2) - (img.height/2) + 'px'; = (screen.width/2) - (img.width/2) + 'px'; = 'block';

    function hideImage(){
    document.body.className = '';
    document.getElementById('showImage').style.display = 'none';

    <img id="image1" src="" onclick="showImage(1)" width="150" height="150">
    <img id="image2" src="" onclick="showImage(2)" width="150" height="150">
    <img id="image3" src="" onclick="showImage(3)" width="120" height="150">
    <img id="showImage" style="position: absolute; display: none; cursor: hand" onclick="hideImage()" alt="Click to hide"></img>


    Let me know if you need any of it explained, etc.

    LVL 13

    Assisted Solution

    Not wanting to steal shaggy_the_sheep's thunder, but rather than reinventing the wheel have you thought of using lightbox...

    ...similar to what you're after...??

    LVL 5

    Expert Comment

    hi bg

    that sounds like a much better might aswell use a professional looking solution....especially when it's free!

    to be honest i'd never heard of lightbox, but i could help me out aswell


    LVL 14

    Assisted Solution

    a lighter weight and more versatile (can also display html pages in a 'box') take on lightbox

    css only thumbnail popup (uses 2 files for each image. thumb & 'zoom').

    another css only solution (uses a single image for both views)


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now