HTML 悬浮图片:在图片上扩大可点击区域 - PHP 中文问答
最编程
2024-07-09 08:05:35
...
尝试这个文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <title>Document</title> <style> body { padding-top: 2em; } ul { list-style: none; padding: 10px 10px 10px 30px } ul li { font-size: 120%; margin-left: 10px; list-style-type: circle; } .container { position: relative; width: 100%; } .columns { display: flex; } .image { display: block; width: 100%; max-width: 320px; 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; } .test { position: absolute; left: 0; border-bottom: green solid; font-size: .5em; font-weight: bold; } .test-top { top: 0; } .test-bottom { bottom: 0; } </style> </head> <body> <div class="columns is-multiline"> <div class="column is-9"> <div class="content"> <h3> 关于我们 </h3> <hr> <p style="font-size:120%; text-align:left"> 一些内容... </p> </div> <div class="columns is-multiline"> <p class="test test-top">开始 columns / is-multiline</p> <div class="column is-4"> <img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" /> </div> <div class="column is-4"> <img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" /> </div> <div class="column is-4"> <div class="container"> <img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" /> <div class="overlay"> <p class="test test-top">开始覆盖</p> <div class="text">你好世界</div> <p class="test test-bottom">结束覆盖</p> </div> </div> </div> <p class="test test-bottom">结束 columns / is-multiline</p> </div> <p style="font-size:120%; text-align:left"> 一些文本... <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> </body> </html>