如何使用css3制作弹出图像？

Question

您好我已经尝试了很多使用CSS和CSS3做弹出图像效果，但结果是什么我不知道是什么问题，我认为这是因为伪类不起作用跟我一样（参观，主动和聚焦等等）只是悬停跟我一起工作所以有人能帮我解决这个问题吗？

我的意思是弹出式图像效果是：你知道点击Facebook上的图像时，图像会弹出它的实际大小，背景会变暗一些吗？

顺便说一下，有人知道伪类有什么问题，为什么它们不适用于我？

谢谢

 <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

您正在寻找的是一个灯箱。他们有很多关于如何制作纯css的好教程，这里有一些： 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
使用:target作为CSS点击事件的问题在于它有一些缺点，例如页面跳转或浏览器历史记录。
您可以使用checkbox hack来避免:target的缺点：
勾选并隐藏它：

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

然后，制作想要拥有灯箱的图像，并将其包装在<label>

中

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

现在，编写灯箱的HTML：

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

现在，对于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;
}

这会创建灯箱并使其居中 现在您需要添加click事件：

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

这个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>

和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

有很多方法可以做到这一点，但最简单的方法是使用Lighbox工具，如：FancyBox，Colorbox插件等。

Fancy Box：http://fancybox.net

 

颜色框：http://www.jacklmoore.com/colorbox/

或者你可以使用：jQuery Lightbox Generator

jQuery灯箱生成器：http://visuallightbox.com/

对于伪类的问题，我从你的问题得到的是你想放大图像？ 检查这个Jsfiddle：

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

我希望这有帮助:)

Answer 3

我认为你的目标肯定是javascript或Jquery。这是一个JSFiddle，它显示了我的目标。

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;
    }