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

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

html css image

Html 如何从中心对焦图像（CSS对焦）？,html,css,image,focus,gallery,Html,Css,Image,Focus,Gallery,我得到了左边的图像从左边聚焦（默认），右边的图像从右边聚焦 a:nth-child(3) img{ right: 0; } 但是如何使中心图像从中心聚焦？还有，有没有一种方法可以使所有图像从同一个位置（页面中间）聚焦，或者我必须使用其他技术（仅限html/css）？最后，有没有更好的方法来构建这种类型的图库？（仅限html/css）多谢各位 HTML <html> <head> <link href="thumb_main.css" rel="stylesh

我得到了左边的图像从左边聚焦（默认），右边的图像从右边聚焦

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

但是如何使中心图像从中心聚焦？还有，有没有一种方法可以使所有图像从同一个位置（页面中间）聚焦，或者我必须使用其他技术（仅限html/css）？最后，有没有更好的方法来构建这种类型的图库？（仅限html/css）

多谢各位

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>

将

左边距：-50%；

和

左边距：-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

如果您想尝试使它们显示为从库页面的中心放大，您可以在焦点上将锚元素的位置更改为

绝对

，删除每三个锚上的定位更改，并对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;
}

你可以在CODEPTEN中看到这个例子.< /P>因为第一个孩子已经是代码>左：0；现在如果你添加了代码>余量左边：0；<代码>，它将重写<代码>左边：50%； >之前我们添加了：<代码>：聚焦IMG < /代码>你欢迎。Alxv。如果你有时间，请考虑标记我的AN。回答正确=）

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