通过使用id，就可以在复杂零散的网页中来标识一个唯一元素。:target伪类选择器改变了我们定位元素的风格。这是一种更专业的接口，我们可以不用JavaScript，而是通过:target伪类选择器来定位。

接下来，我们通过:target伪类选择器改变了声明的样式属性。我们设定好内边距、背景和边框等，更重要的是，我们重置不透明度opacity为1。

@media (min-width: 48rem) { 
.item:target .item__description { 
opacity : 1; 
width : 100%; 
height : 480px; 
padding: 40px 40px 40px 280px; 
background-color: rgb(223,225,226); 
background-repeat : no-repeat; 
background-position : 40px 40px; 
border: 10px solid rgb(236,238,239); 
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 2px 0 rgba(0, 
0, 0, 0.5); } 
}

为什么左边有一部分内边距？我们打算在这个地方放置背景图片background-image来填充。使用:target id来表示图像。

@media (min-width: 48rem) { 
#hb-target-01:target .description { 
background-image : url(target-01.jpg); } 
#hb-target-02:target .description { 
background-image : url(target-02.jpg); } 
#hb-target-03:target .description { 
background-image : url(target-03.jpg); } 
#hb-target-04:target .description { 
background-image : url(target-04.jpg); } 
[…]
}

要完成这个设计，我们还需要隐藏内容简介的文字信息，并显示图像网格。因此，可以提供指向一个外部元素的链接来回到初始状态。

使用属性选择器来定位顶部右侧的链接。

@media (min-width: 48rem) { 
a[href="#hb-target"] { 
position : absolute; 
top : -20px; 
right : -20px; 
display : block; 
width : 26px; 
height : 26px; }

没有使用JavaScript，仅仅用opacity和:target 就完成了这个设计。