如何为网站模板图片添加悬停超链接且不破坏布局

完全不用改动Bootstrap的网格结构，直接修改现有图片外层的<a>标签就能实现，步骤超简单：

• 把原来指向大图的href值替换成你要跳转的外部网站地址
• 可选添加target="_blank"让链接在新窗口打开，再加rel="noopener noreferrer"提升安全性
• 保留原有的image fit thumb类，原模板的悬停效果和布局都不会受影响

修改后的代码示例（其余项目同理修改）：

<!-- Portfolio 1 -->
<section id="two">
    <h1><strong>My Portfolio</strong></h1>
    <div class="row">
        <article class="col-6 col-12-xsmall work-item">
            <!-- 修改href为外部链接，添加target和rel属性 -->
            <a href="https://your-external-project-url.com" class="image fit thumb" target="_blank" rel="noopener noreferrer">
                <img src="images/thumbs/01.jpg" alt="SQL COVID-19 Data Exploration" />
            </a>
            <h3>SQL: COVID-19 Data Exploration</h3>
            <p>This is a project about COVID-19 cases.</p>
        </article>
        <article class="col-6 col-12-xsmall work-item">
            <a href="https://your-tableau-dashboard-url.com" class="image fit thumb" target="_blank" rel="noopener noreferrer">
                <img src="images/thumbs/02.jpg" alt="Tableau COVID-19 Dashboard" />
            </a>
            <h3>Tableau: COVID-19 Dashboard</h3>
            <p>This is a project about COVID-19 cases dashboard.</p>
        </article>
        <!-- 剩余两个项目按同样方式修改href即可 -->
    </div>
</section>

为什么不会破坏布局？ #

我们只修改了<a>标签的跳转属性，完全没触碰col-6 col-12-xsmall work-item这些Bootstrap网格类，article元素的布局依然由Bootstrap网格系统控制，<a>作为内部元素只会继承原有样式，不会影响整体布局。原模板的图片悬停效果（.thumb类的样式）也会完整保留，不需要额外编写CSS。

内容的提问来源于stack exchange，提问作者Muhammad Aziq Hamidun