how to make pop-up image using css3? - html

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

I think what you're going for is definitely javascript or Jquery. here is a JSFiddle which shows what i'm on about.
HTML:
<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/>
<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;
}

Answer 3

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 :)