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

如果您想尝试让它们看起来从图库页面的中心放大，您可以将锚点元素的位置更改为焦点上的absolute，删除每个第三个锚点上的定位更改并进行制作对a：焦点图像块进行一些更改。

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中看到该示例。

Answer 2

将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

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

2 个答案: