HTML hover image: expand clickable area beyond image-PHP Chinese Network Q&A

I am relatively new to css/html. I've been browsing around this issue for a while but haven't found a solution.

The problem is that if I use the code below (using Bulma), when hovering on img3.jpg, the clickable area is removed from The first

starts with the entire block . I suspect the problem may be a conflict between Bulma's is-column/is-multiline, and the overriding CSS definitions I provide ?

<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>

P粉459440991

reply all(1)

P粉7383463802023-09-11 00:10:53 1 floor

Try this document





  
  
  
  
  Document
  





  
    
      
         关于我们 
        
        
          一些内容...
        
      
      
        开始 columns / is-multiline
        
          
        
        
          
        
        
          
            
            
              开始覆盖
              你好世界
              结束覆盖
            
          
        
        结束 columns / is-multiline
      

      
        一些文本...

        

          
            项目1
            
              链接
            
          
          
            项目2
            
              链接
          
        
      

    

    
      {% include latest-posts.html %}