Html 如何使用css3制作弹出图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25538225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make pop-up image using css3?
提问by Istanbouly
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?
您好，我一直在尝试使用 CSS 和 CSS3 来制作弹出图像效果，但结果是什么我不知道是什么问题，我认为这是因为伪类不适用于我（访问，活动和焦点等。）只需悬停与我一起工作，有人可以帮我解决这个问题吗？
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?
我所说的弹出图像效果的意思是：你知道当点击 Facebook 上的图像时，图像会以实际大小弹出，背景变得更暗一点？
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="" />
回答by Jacob Gray
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 :targetas a CSS click event is that it has some downsides such as page jumps or browser history.
You can avoid the downsides of :targetby using the checkbox hack:
Make a checkbox and hide it:
您正在寻找的东西称为灯箱。他们有很多关于如何制作纯 css 的好教程，这里有一些：http:
//andornagy.com/pure-css-image-lightbox/
http://www.designcouch.com/home/why /一十一分之二千零十三/ 01 /响应，CSS3，收藏与-没有的JavaScript /
http://www.thecssninja.com/xhtml/futurebox
使用的问题:target作为一个CSS click事件是，它有一些缺点，如页面跳转或浏览器历史记录。
您可以:target通过使用复选框 hack来避免缺点：创建
一个复选框并隐藏它：
<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>
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
Now, write the HTML for the lightbox:
现在，为灯箱编写 HTML：
<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:
现在，为了 CSS 魔法！创建灯箱 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 #checkis checked (:checkedselector), 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:
这个 CSS 的意思是，如果#check被选中（:checked选择器），在标签元素中找到 id 为 #cover 的兄弟（~）并将规则应用于它。就是这样！
您的编码应如下所示：
<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:
和 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
看看这个 JSFIDDLE
回答by YOU
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.
有很多方法可以做到这一点，但最简单的方法是您可以使用灯箱工具，例如：FancyBox、Colorbox 插件等。
Fancy Box: http://fancybox.net
花式盒子：http: //fancybox.net
Color Box: http://www.Hymanlmoore.com/colorbox/
彩盒：http: //www.Hymanlmoore.com/colorbox/
Alternatively you can use: jQuery Lightbox Generator
或者你可以使用：jQuery Lightbox Generator
jQuery Lightbox Generator: http://visuallightbox.com/
jQuery 灯箱生成器：http: //visuallightbox.com/
For the problem with pseudo-classes, what i got from your question is you want to enlarge image? Check this Jsfiddle:
对于伪类的问题，我从你的问题中得到的是你想放大图像吗？检查这个 Jsfiddle：
` http://jsfiddle.net/23zgvg1f/1/ `
I hope this helps :)
我希望这有帮助 ：）
回答by Hayo Friese
I think what you're going for is definitely javascript or Jquery. here is a JSFiddlewhich shows what i'm on about.
我认为您要使用的绝对是 javascript 或 Jquery。这是一个JSFiddle，它显示了我在做什么。
HTML:
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:
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;
}
