how to make pop-up image using css3?

Question

Hello i have been trying a lot to do the pop-up image effect using CSS and CSS3 but the result is nothing i don't know what is the problem, i think it's because of the pseudo-classes don't work with me like (visited,actived and focus etc..) just hover works with me so could anybody help me solve this problem?

what i mean by pop-up image effect is : you know when clicking on an image on Facebook that image is popped up with it's real size and the background is become a little bit more dark?

By the way does anyone know what is the problem with the pseudo-classes why they don't work with me?

thanks

 <style type="text/css">
           .pop{
             border: 1px solid #000 ;
             border-radius: 15%;
             width: 200px;
             height: 200px;
           }
             .pop:active{
             width:500px ;
             height:500px;
             position:relative;
             right: -65px;
             top: 200px ;
             background-color:#000;
             }

<img class='pop' src="C:/Users/mohammad ghazi/Desktop/Xhtml folder/friends.jpg" alt="" />  

Answer 1

What you are looking for is called a lightbox. Their are many good tutorials on how to make a pure css one, here is a few of them: http://andornagy.com/pure-css-image-lightbox/
http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/
http://www.thecssninja.com/xhtml/futurebox
The problem with using :target as a CSS click event is that it has some downsides such as page jumps or browser history.
You can avoid the downsides of :target by using the checkbox hack:
Make a checkbox and hide it:

<input type="checkbox" id="check" style="display:none;">

Then, make the image you want to have a lightbox for, and wrap it in a <label>

<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>

Now, write the HTML for the lightbox:

<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>

And now, for the CSS magic! Create the lightbox css:

#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}

This creates and centers the lightbox.
Now you need to add the click event:

#check:checked ~ label #cover{
display:block;
}

This CSS means, If #check is checked (:checked selector), find the sibling (~) with a id of #cover inside a label element and apply the rule to it. That's it!
Your coding should look like this:

<input type="checkbox" id="check" style="display:none;">
<label for="check">
    <img src="http://lorempixel.com/400/400/" width="200">
    </label>
<label for="check">
    <div id="cover">
    <div id="box">
    <img src="http://lorempixel.com/400/400/" width="400">
    </div>
    </div>
    </label>

And CSS:

  #check:checked ~ label #cover{
    display:block;
    }
#cover{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
    display:none;
    }
    #box{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    width:400px;
    height:400px;
    border:10px solid white;
    }

SEE THIS JSFIDDLE

Answer 2

There are many ways to do this, but most easy way to do this is you can use lighbox tools like: FancyBox, Colorbox plugins etc.

Fancy Box: http://fancybox.net

Color Box: http://www.jacklmoore.com/colorbox/

Alternatively you can use: jQuery Lightbox Generator

jQuery Lightbox Generator: http://visuallightbox.com/

For the problem with pseudo-classes, what i got from your question is you want to enlarge image? Check this Jsfiddle:

  ` http://jsfiddle.net/23zgvg1f/1/ `

I hope this helps :)

Answer 3

I think what you're going for is definitely javascript or Jquery. here is a JSFiddle which shows what i'm on about.

HTML:

<a href="#"><img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/></a>

<div id="divLargerImage"></div>
<div id="divOverlay"></div>

JQuery:

$('a img').click(function () {
    var $img = $(this);
    $('#divLargerImage').html($img.clone().height(250).width(250)).add($('#divOverlay')).fadeIn();
});

$('#divLargerImage').add($('#divOverlay')).click(function () {
    $('#divLargerImage').add($('#divOverlay')).fadeOut(function () {
        $('#divLargerImage').empty();
    });
});

CSS:

    #divLargerImage
    {
        display: none;
        width: 250px;
        height: 250px;
        position: absolute;
        top: 35%;
        left: 35%;
        z-index: 99;
    }

    #divOverlay
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #CCC;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        z-index: 98;
    }