CSS的功用不仅限于网页设计中的页面布局以及样式美化，还可以在图像上添加一些链接和视频。

img {
display: block;
width: 50%;
margin: 0 auto;
}
a:hover img {
opacity: 0.5;
}
a:after {
content: "点击以查看视频";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 1rem;
border-radius: 1rem;
opacity: 0;
transition: all .5s ease;
}
a:hover:after {
opacity: 1;
}

上述代码用于添加一个链接到图片上。你可以在CSS中使用伪类`:after`为链接添加一个文字内容，这样用户点击链接就能看到视频了。

以上是基本的图片链接和视频链接的写法，这些代码都是可以自由调整的，以便于实现更多自定义的样式。比如效果可以是鼠标悬浮在图片上时出现一个半透明的遮罩，并且加上一个文字来提示用户可以通过点击打开视频链接。无论你是在学习CSS还是在制作网页，这些代码都是非常有帮助的。