240811-Gradio鼠标悬停Hover图片放大显示

原创

GuokLiu 2024-08-21 11:41:27 ©著作权

文章标签 Gradio GUI 前端 Image HTML 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者GuokLiu的原创作品，请联系作者获取转载授权，否则将追究法律责任

A. 最终效果

240811-Gradio鼠标悬停Hover图片放大显示_Gradio

B. 参考代码

要在Gradio中结合CSS、HTML和JavaScript展示一张图片，当鼠标悬浮在图片上时，图像能够弹出并放大，可以按以下方式实现：

使用Gradio的HTML组件嵌入自定义的CSS和HTML。
利用CSS实现图片放大效果。

下面是一个完整的Gradio示例代码，展示如何实现这个功能：

import gradio as gr

# HTML and CSS for the zoom effect
html_content = """
<style>
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom img {
  width: 100%;
  height: 100%;
}

.zoom:hover {
  transform: scale(1.5);
}
</style>

<div class="zoom">
  <img src="https://via.placeholder.com/200" alt="Image">
</div>
"""

def display_zoom():
    return html_content

with gr.Blocks() as demo:
    gr.HTML(display_zoom)

demo.launch()

代码解释：

CSS部分:

.zoom 类定义了图片的容器，设置了背景颜色、padding、过渡动画等。
当鼠标悬浮在图片上时，.zoom:hover 类会应用缩放效果。

HTML部分:

div 容器内嵌了一张图片 (img 标签)，这张图片会在鼠标悬浮时进行放大。

Gradio部分:

使用 gr.HTML 组件直接嵌入HTML代码，使得Gradio应用能够显示具有缩放效果的图片。

这样，当你运行Gradio应用时，鼠标悬浮在图片上时，图片会放大并弹出。

C. 本地图片

gr.Markdown

240811-Gradio鼠标悬停Hover图片放大显示_Image_02

C. 多张图片

要实现4行6列的图片排版，你可以使用CSS的grid布局。以下是一个完整的代码示例，展示如何使用Gradio和HTML/CSS来实现4行6列的图片排版：

import gradio as gr

# Assuming the images are in the "file" directory
html_content = """
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columns */
  grid-template-rows: repeat(4, auto); /* 4 rows */
  grid-gap: 10px; /* Space between items */
  justify-items: center;
}

.zoom {
  padding: 5px;
  background-color: green;
  transition: transform .2s;
  width: 150px;
  height: 200px;
}

.zoom img {
  width: 100%;
  height: 100%;
}

.zoom:hover {
  transform: scale(1.5);
  transform-origin: center bottom;
}
</style>

<div class="grid-container">
  <!-- Row 1 -->
  <div class="zoom"><img src='file/image1.png' alt="Image 1"></div>
  <div class="zoom"><img src='file/image2.png' alt="Image 2"></div>
  <div class="zoom"><img src='file/image3.png' alt="Image 3"></div>
  <div class="zoom"><img src='file/image4.png' alt="Image 4"></div>
  <div class="zoom"><img src='file/image5.png' alt="Image 5"></div>
  <div class="zoom"><img src='file/image6.png' alt="Image 6"></div>

  <!-- Row 2 -->
  <div class="zoom"><img src='file/image7.png' alt="Image 7"></div>
  <div class="zoom"><img src='file/image8.png' alt="Image 8"></div>
  <div class="zoom"><img src='file/image9.png' alt="Image 9"></div>
  <div class="zoom"><img src='file/image10.png' alt="Image 10"></div>
  <div class="zoom"><img src='file/image11.png' alt="Image 11"></div>
  <div class="zoom"><img src='file/image12.png' alt="Image 12"></div>

  <!-- Row 3 -->
  <div class="zoom"><img src='file/image13.png' alt="Image 13"></div>
  <div class="zoom"><img src='file/image14.png' alt="Image 14"></div>
  <div class="zoom"><img src='file/image15.png' alt="Image 15"></div>
  <div class="zoom"><img src='file/image16.png' alt="Image 16"></div>
  <div class="zoom"><img src='file/image17.png' alt="Image 17"></div>
  <div class="zoom"><img src='file/image18.png' alt="Image 18"></div>

  <!-- Row 4 -->
  <div class="zoom"><img src='file/image19.png' alt="Image 19"></div>
  <div class="zoom"><img src='file/image20.png' alt="Image 20"></div>
  <div class="zoom"><img src='file/image21.png' alt="Image 21"></div>
  <div class="zoom"><img src='file/image22.png' alt="Image 22"></div>
  <div class="zoom"><img src='file/image23.png' alt="Image 23"></div>
  <div class="zoom"><img src='file/image24.png' alt="Image 24"></div>
</div>
"""

def display_zoom():
    return html_content

with gr.Blocks() as demo:
    gr.HTML(display_zoom)

demo.launch(allowed_paths=["./"])

代码解释：

.grid-container:

使用 display: grid; 实现网格布局。
grid-template-columns: repeat(6, 1fr); 创建了6列，每列占据相等的宽度。
grid-template-rows: repeat(4, auto); 创建了4行，行高根据内容自动调整。

.zoom:

这个类用于每个图片的缩放效果，和之前的一致，鼠标悬停时图片会放大。

图片路径:

图片的路径被假设为在 “file” 目录下。请根据你的图片文件路径进行调整。

运行这个代码后，你将会看到24张图片按4行6列的方式排列，当鼠标悬浮在图片上时，它们会分别放大。

D. 演示代码

import gradio as gr

# Assuming the images are in the "file" directory
html_content = """
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 9 columns */
  grid-template-rows: repeat(3, auto); /* 3 rows */
  grid-gap: 10px; /* Space between items */
  justify-items: center;
}

.zoom {
  padding: 5px;
  background-color: green;
  transition: transform .2s;
  width: 150px;
  height: 200px;
}

.zoom img {
  width: 100%;
  height: 100%;
}

.zoom:hover {
  transform: scale(1.5);
  transform-origin: center bottom;
}
</style>

<div class="grid-container">
  <!-- Row 1 -->
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-a5f148b6d1ab0aa23ce9942490b07bb3_1440w.webp' alt="Image 1"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-dbb8e8c50ccf99ce12f6b20d836e3c24_1440w.webp' alt="Image 2"></div>
  <div class="zoom"><img src='https://pic3.zhimg.com/80/v2-16518004144b01046acb9a77d8c9929a_1440w.webp' alt="Image 3"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-537f506465f9dfc93f316c4ab7466e47_1440w.webp' alt="Image 4"></div>
  <div class="zoom"><img src='https://pic3.zhimg.com/80/v2-421fe3403b2d0cb7932f86e5fa9e5d3a_1440w.webp' alt="Image 5"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-9e1400b21836fba1c4a45c6794b6ec1b_1440w.webp' alt="Image 6"></div>

  <!-- Row 2 -->
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-da959606ad080401567623ada87fdf1d_1440w.webp' alt="Image 7"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-c218c8c41b5c0dc42f95cdbeab158d50_1440w.webp' alt="Image 8"></div>
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-d8518c4fbf1dff8998b422c8c3bcfa95_1440w.webp' alt="Image 9"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-96d7af610f4bc7009feb97a551e5db57_1440w.webp' alt="Image 10"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-d91096b4a806d80507190c7b7621e7e4_1440w.webp' alt="Image 11"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-e0bea28aa5af5a0f8c6232ee1e7bb583_1440w.webp' alt="Image 12"></div>

  <!-- Row 3 -->
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-7dc9b095dc91d44effa14cc3d9126ae3_1440w.webp' alt="Image 13"></div>
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-0915993037609c4db64b1804d5c8d701_1440w.webp' alt="Image 14"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-f97567b342be88f32130547f18bc84c8_1440w.webp' alt="Image 15"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-e29ed5beb8965cc2cb468a7cbe4aa74f_1440w.webp' alt="Image 16"></div>
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-acfff0b8959c83f2cd40b99a9ad91b2d_1440w.webp' alt="Image 17"></div>
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-12fe8e77437cdfb4fa525ab2c25bb9a5_1440w.webp' alt="Image 18"></div>

  <!-- Row 4 -->
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-01059cb59c089b0e6c37407c443ebdad_1440w.webp' alt="Image 19"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-c9c5a2d57d13410ada84e16536c06e34_1440w.webp' alt="Image 20"></div>
  <div class="zoom"><img src='https://pic2.zhimg.com/80/v2-be55fa35fb95fdc2bc2867378bc1347d_1440w.webp' alt="Image 21"></div>
  <div class="zoom"><img src='https://pic3.zhimg.com/80/v2-98150df57e517ae535d6be8a5e30159a_1440w.webp' alt="Image 22"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-709915a01b026400e4b0d7bb06081de8_1440w.webp' alt="Image 23"></div>
  <div class="zoom"><img src='https://pic3.zhimg.com/80/v2-1075ad16ed8f9fe3173409408e6a6786_1440w.webp' alt="Image 24"></div> 
  
  <!-- Row 5 -->
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-3d842d9930881c710778b84a479e2837_1440w.webp' alt="Image 25"></div>
  <div class="zoom"><img src='https://pic4.zhimg.com/80/v2-faa90e92b86a7ecb9b769d322479ac23_1440w.webp' alt="Image 26"></div>
  <div class="zoom"><img src='https://pic1.zhimg.com/80/v2-8c8d33a0f93bbb1692ae436ede28e6a4_1440w.webp' alt="Image 21"></div>
</div>
"""


def display_zoom():
    return html_content


with gr.Blocks() as demo:
    gr.HTML("<div style='text-align: center'><h1>名侦探柯南1997-2024: 27部剧场版点电影海报</h1></div>")
    gr.HTML(display_zoom)

demo.launch(allowed_paths=["./"])