如何从中心对焦图像（CSS 焦点）？

Question

我让左图从左（默认）对焦，右图从右对焦。

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

Answer 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

Answer 2

如果您想让它们看起来像是从图库页面的中心放大，您可以将锚元素的位置更改为 absolute 焦点，移除每三个锚点的定位更改并对 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 中查看示例。

如何从中心对焦图像（CSS 焦点）？

How do I focus image from the center (CSS focus)?

html

css

focus

image

gallery