我對css/html相對較新。 我已經瀏覽了一段時間關於這個問題，但沒有找到解決方案。
問題是，如果我使用下面的程式碼（使用Bulma），當在img3.jpg上懸停時，可點擊區域是從第一個開始的整個區塊。我懷疑問題可能是Bulma的
is-column / is-multiline之間的衝突，以及我提供的覆蓋CSS定義# ？
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> 关于我们 </h3>
<hr>
<p align="left" style="font-size:120%;">
一些内容...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">你好，世界</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
一些文本...
<ul>
<li>
项目1
<a href="url1">
<b>链接</b>
</a>
</li>
<li>
项目2
<a href="url2">
<b>链接</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
嘗試這個文檔