仅用css+HTML实现图片墙功能_应用墙 html-CSDN博客

本文链接：https://blog.csdn.net/zjut_acm/article/details/44944637

本文介绍如何仅使用CSS和HTML技术实现一个图片墙功能。在Firefox或Chrome浏览器中，当鼠标悬停在图片上时，图片会链接到放大后的版本。这是一个纯前端的解决方案，不涉及JavaScript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

备注：最好在firefox或chrome运行，在IE效果没出现 -。-

效果如下：

当鼠标移动到某一张图片时，另外也点击打开图片，会自动连接到大图片。

代码如下：

-----------NewFile.html--------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="NewFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="photo-album">
    <h1><span>Angel <abbr title="and" class="amp">&</abbr> Girl in New Zealand</span></h1>        
    <a href="./images/1.jpg" class="large polaroid img1"><img src="./images/1_small.jpg" alt="" />This breathtaking volcanic lake is at Wai-O-Tapu Thermal Wonderland</a>
    <a href="./images/2.jpg" class="polaroid img2"><img src="./images/2_small.jpg" alt="" />This lovely waterfall was at Rotorua in Rainbow Springs</a>
    <a href="./images/3.jpg" class="small polaroid img3"><img src="./images/3_small.jpg" alt="" />Ferntastic</a>        
    <a href="./images/10.JPG" class="medium polaroid img4"><img src="./images/10_small.jpg" alt="" />At Kaikoura we went whale watching!</a>        
    <a href="./images/5.JPG" class="polaroid img5"><img src="./im