如何从中心聚焦图像（CSS 焦点）？答案

【问题标题】：How do I focus image from the center (CSS focus)?如何从中心聚焦图像（CSS 焦点）？
【发布时间】：2015-06-16 21:34:27
【问题描述】：

我让左图像从左侧（默认）聚焦，右图像从右侧聚焦。

a:nth-child(3) img{
right: 0;
}

但是如何使中心图像从中心聚焦？另外，有没有办法让所有图像都集中在同一个地方（页面中间，还是我必须一起使用其他技术（仅限html/css）？最后，有没有更好的技术来构建这个图库类型？（仅限html/css）

Codepen link

谢谢。

HTML

<html>
<head>
<link href="thumb_main.css" rel="stylesheet" type="text/css" />
<title>Thumbnails Gallery</title>
</head>
<body>
<div class="gallery">
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
<a tabindex="1"><img src="ball.jpg">
</a>
</div>
</body>
</html>

CSS

* {
margin: 0;}

.gallery{
margin:20px auto;
width:900px;
height:900px;
position:relative;
}

a {
float:left;
position: relative;
width:30%;
height:30%;
border: 1px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

a img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-duration: 300ms; 
-moz-transition-duration: 300ms;
-o-transition-duration: 300ms;
position: absolute;
cursor: pointer;
}

a:focus img{
width: 200%; 
height: 200%;
position: absolute;
opacity:1; 
z-index: 1; 
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; 
-webkit-transition-duration: 1s; 
-webkit-transition-delay: 0.3s; 
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}

a:nth-child(3) img{
right: 0;
}

【问题讨论】：

标签： html css image focus gallery

【解决方案1】：

将margin-left:-50%; 和margin-top:-50%; 添加到a:focus img：

a:focus img{
    width: 200%; 
    height: 200%;
    margin-left:-50%; /* line added */
    margin-top:-50%; /* line added */
    position: absolute;
    opacity:1; 
    z-index: 1; 
    -moz-box-shadow: 0 0 15px 2px #000;
    -webkit-box-shadow: 0 0 15px 2px #000;
    box-shadow: 0 0 15px 2px #000; 
    -webkit-transition-duration: 1s; 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-duration: 2s;
    -moz-transition-delay: 0.3s;
    -o-transition-duration: 2s;
    -o-transition-delay: 0.3s;
    cursor: default;
}

Codepen example here

【讨论】：

因为第一个孩子现在已经是left :0;，如果你为它添加margin-left:0;，它将覆盖我们之前添加的margin-left:50%;：a:focus img
不客气@AlexV。如果您有空闲时间，请考虑将我的答案标记为正确 =)

【解决方案2】：

如果您想让它们看起来从画廊页面的中心放大，您可以将锚元素的位置更改为 absolute on focus，移除每隔三个锚点的位置更改并制作一些更改为 a:focus 图像块。

a:focus {
  position:absolute;    
  left:30%;
  top:130px;
  z-index:1;
}
a:focus img{
  width: 200%; 
  height: 200%;
  position: absolute;
  margin:-50%;
  opacity:1; 
  z-index: 1; 
  -moz-box-shadow: 0 0 15px 2px #000;
  -webkit-box-shadow: 0 0 15px 2px #000;
  box-shadow: 0 0 15px 2px #000; 
  -webkit-transition-duration: 1s; 
  -webkit-transition-delay: 0.3s; 
  -moz-transition-duration: 2s;
  -moz-transition-delay: 0.3s;
  -o-transition-duration: 2s;
  -o-transition-delay: 0.3s;
  cursor: default;
}

您可以在 Codepen here 中查看示例。

【讨论】：