css - 是否可以通过在 CSS 中单击图像来“调出”图像？

Question

我正在使用用户样式表来修改网页，因为我将所有图像都移到了最右边。它正在工作，除了在 r​​eddit 上我还使用RES的拖动缩放和其他一些事情变得有点混乱的网站：http: //i.stack.imgur.com/nJUyK.png

所以我想知道我是否可以点击一张图片从那一堆密集的图片中“调出”。在 CSS 中是否可能（因为我只使用 CSS 用户样式表）但我对任何替代方案持开放态度。

Answer 1

您可以使用重新设置样式的复选框/单选按钮来做到这一点
（来源： http: //www.inserthtml.com/2012/04/css-click-states/）

将要显示的图像和一个复选框（根据需要设置样式）放入容器中

<form class="clickable"> 
  <label for="the-checkbox">Click Me!</label>
  <!-- Radiobuttons should do it, too! -->
  <input type="checkbox" id="the-checkbox" /> 
  <!-- This is the div we want to appear and disappear -->
  <div class="appear">Some text(image to appear</div>
</form>

现在您可以使用伪选择器切换图像的可见性（或您的情况下的 z-Index）:checked。

.clickable .appear { 
  display: none;
}

.clickable input:checked ~ .appear {
  /* Or change the z-Index here */
  display: block;
}

查看上面链接的文章底部的“快速演示”。
使用 id 代替分类或标签名称作为 CSS 选择器也是可能的。所以切换多个图像应该不是问题。
使用单选按钮的魅力在于，当您单击下一个按钮时，最后一个选择的按钮会被取消选择（未经测试，只是一个想法；）。

Answer 2

如果你可以使用 CSS3，你可以看看这个：http ://designshack.net/tutorialexamples/HoverEffects/Ex2.html

基本上

img {
height: 100px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

and 

img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}