将鼠标悬停在网格中的另一个图像上时如何使图像出现？ CSS

Question

我是 CSS 的初学者，有很多关于将鼠标悬停在文本上以显示图像的主题，但是如何使用图像网格做到这一点？

具体来说，我正在尝试创建一个网站，我希望将鼠标悬停在较小的图像上，并使其在右侧旁边的空间中显得更大。 [1]：https://i.stack.imgur.com/mrisd.jpg

我有一个代码，当将鼠标悬停在它上面时会显示更大的图像，但是以这种方式创建网格会非常乏味。然后我尝试了一个代码来创建图像网格，但我不确定如何在悬停时引用这些图像然后放大该图像。 下面是两个代码

    <div class="hover-title">{image 1}</div>
    <div class="hover-image">{image 1}</div>

    <div class="hover-title">{image 2}</div>
    <div class="hover-image">{image 2}</div>

但是，我有 400 张图片，所以这段代码显然无法正常工作。我迫切需要帮助！谢谢。

    <div grid-row="" grid-pad="0.25" grid-gutter="0.5">
    <div grid-col="x11" grid-pad="0.25" class=""><div class="image-gallery" 
gid="4">
{image 1}
{image 1}
{image 2}
{image 3}
{image 4}
{image 5}
{image 6}
{image 7}
{image 8}
{image 9}
{image 10}
{image 11}
{image 12}
{image 13}
{image 14}
{image 15}
{image 16}
{image 17}
{image 18}
{image 19}
{image 20}
{image 21}
{image 22}
{image 23}
{image 24}
{image 25}
{image 26}
{image 27}
{image 28}
{image 29}
{image 30}
{image 31}
{image 32}
{image 33}
{image 34}
{image 36}
{image 37}
{image 40}
{image 46}
{image 47}
{image 48}
{image 49}
{image 50}
{image 51}
{image 52}
{image 53}
{image 54}
{image 55}
{image 56}
{image 57}
{image 58}
{image 59}
{image 60}
{image 61}
{image 62}
{image 63}
{image 64}
{image 65}
{image 66}
{image 67}
{image 68}
{image 69}
{image 70}
{image 71}
{image 72}
{image 73}
{image 74}
{image 75}
{image 76}
{image 77}
{image 78}
{image 79}
{image 80}
{image 81}
{image 82}
{image 83}
{image 84}
{image 85}
{image 86}
{image 87}
{image 88}
{image 89}
{image 90}
{image 91}
{image 92}
{image 93}
{image 94}
{image 95}
{image 96}
{image 97}
{image 98}
{image 99}
{image 100}
{image 101}
{image 102}
{image 103}
{image 104}
{image 105}
{image 106}
{image 107}
{image 108}
{image 109}
{image 110}
{image 111}
{image 112}
{image 113}
{image 114}
{image 115}
{image 116}
{image 117}
{image 118}
{image 120}
{image 121}
{image 122}
{image 123}
{image 124}
{image 125}
{image 126}
{image 127}
{image 128}
{image 129}
{image 130}
{image 131}
{image 132}
{image 133}
{image 134}
{image 135}
{image 136}
{image 137}
{image 138}
{image 139}
{image 140}
{image 141}
{image 142}
{image 143}
{image 144}
{image 145}
{image 146}
{image 147}
{image 148}
{image 149}
{image 150}
{image 151}
{image 152}
{image 153}
{image 154}
{image 155}
{image 158}
{image 159}
{image 160}
{image 161}
{image 162}
{image 163}
{image 164}
{image 165}
{image 166}
{image 167}
{image 172}
{image 181}
{image 182}
{image 183}
{image 184}
{image 185}
{image 186}
{image 187}
{image 188}
{image 189}
{image 190}
{image 191}
{image 192}
{image 193}
{image 194}
{image 196}
{image 197}
{image 198}
{image 199}
{image 200}
{image 201}
{image 202}
{image 203}
{image 204}
{image 205}
{image 206}
{image 207}
{image 208}
{image 209}
{image 210}
{image 211}
{image 212}
{image 213}
{image 214}
{image 215}
{image 216}
{image 217}
{image 218}
{image 219}
{image 220}
{image 221}
{image 222}
{image 223}
{image 224}
{image 225}
{image 226}
{image 227}
{image 228}
{image 229}
{image 230}
{image 231}
{image 232}
{image 233}
{image 234}
{image 235}
{image 236}
{image 237}
{image 238}
{image 239}
{image 240}
{image 241}
{image 242}
{image 243}
{image 244}
{image 245}
{image 246}
{image 247}
{image 248}
{image 249}
{image 250}
{image 251}
{image 252}
{image 253}
{image 254}
{image 255}
{image 256}
{image 257}
{image 258}
{image 259}
{image 260}
{image 261}
{image 262}
{image 263}
{image 264}
{image 265}
{image 266}
{image 267}
{image 268}
{image 269}
{image 270}
{image 271}
{image 272}
{image 273}
{image 274}
{image 275}
{image 276}
{image 277}
{image 278}
{image 279}
{image 280}
{image 281}
{image 282}
{image 283}
{image 284}
{image 285}
{image 286}
{image 287}
{image 288}
{image 289}
{image 290}
{image 291}
{image 292}
{image 293}
{image 294}
{image 295}
{image 296}
{image 297}
{image 298}
{image 299}
{image 300}
{image 301}
{image 302}
{image 303}
{image 304}
{image 305}
{image 306}
{image 307}
{image 308}
{image 309}
{image 310}
{image 311}
{image 312}
{image 313}
{image 314}
{image 315}
{image 316}
{image 317}
{image 318}
{image 319}
{image 321}
{image 322}
{image 323}
{image 324}
{image 325}
{image 326}
{image 327}
{image 328}
{image 329}
{image 330}
{image 331}
{image 332}
{image 333}
{image 334}
{image 335}
{image 336}
{image 337}
{image 338}
{image 339}
{image 340}
{image 341}
{image 342}
{image 343}
{image 344}
{image 345}
{image 346}
{image 347}
{image 348}
{image 349}
{image 350}
{image 351}
{image 352}
{image 353}
{image 354}
{image 355}
{image 356}
{image 357}
{image 358}
{image 359}
{image 360}
{image 361}
{image 362}
{image 363}
{image 364}
{image 365}
{image 366}
{image 367}
{image 368}
{image 369}
{image 370}
{image 371}
{image 372}
{image 373}
{image 374}
{image 375}
{image 376}
{image 377}
{image 378}
{image 379}
{image 380}
{image 381}
{image 382}
{image 384}
{image 385}
{image 386}
{image 387}
{image 388}
{image 389}
{image 390}
{image 391}
{image 1}
{image 2}
</div></div>
    <div grid-col="x11" grid-pad="0.25"></div>

任何帮助将不胜感激，谢谢！

Answer 1

我已经完成了类似的代码，如果你只想使用 Html 和 CSS，我会给你一个例子。试试看，让我知道。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Image</title>
    <style type="text/css">
      .popup {
        zoom: 1;
        position: relative;
        text-decoration: none;
      }
      /* .popup is the CSS that makes the images apear and where to apear  */
      .popup span {
        position: fixed;
        top: 170px;
        left: 500px;
        padding: 10px;
        border: 4px solid #000;
        border-radius: 10px;
        left: -999em;
        z-index: 990;
      }
      .popup:hover {
        visibility: visible;
      }
      .popup:hover span {
        left: 50px;
      }
      * html .popup span {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <p>
      <a class="popup" href="#"
        >This is a text
        <span><img src="https://placekitten.com/200/300" /></span
      ></a>
    </p>

    <p>
      <a class="popup" href="#"
        >Another Text<span><img src="http://placekitten.com/g/200/300" /></span
      ></a>
    </p>
  </body>
</html>