需要帮助给现代画廊标签答案

【问题标题】：Need help giving a modern gallery labels需要帮助给现代画廊标签
【发布时间】：2012-07-30 12:33:12
【问题描述】：

我正在制作一个作品集网站，我想包含一些我中学时的作品，但我想在上面贴上标签以区分它。

图库是一堆不同高度和宽度的小比例图像，并略微旋转，当您将鼠标悬停在图像上时，它会增长到正常大小。

image 的上半部分是现在的样子，下半部分是我想要的样子。

我尝试使用标签和其中的图像制作跨度，但没有成功。

这是我没有标签的代码：

<html>
<head>

    <title>
        Gallery Test
    </title>

    <style>

        .gallery_img {
            -moz-transform: scale(0.3);
            -moz-transition: all 0.4s ease-in-out 0s;
            background-color: white;
            padding: 20px;
            -webkit-box-shadow:  1px 1px 10px 2px rgba(0, 0, 0, 0.5);
            box-shadow:  1px 1px 10px 2px rgba(0, 0, 0, 0.5);
            margin: -100px -195px;
            z-index: 1;
        }

        .gallery_img:hover {
            -moz-transform: scale(1) rotate(0deg) !important;
            z-index: 100;
        }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<head>

<body>

    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />

    <br />

    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />
    <img class="gallery_img" src="../images/no_image.png" />

    <script>

        $(document).ready(function() {
            $(".gallery_img").each(function() {
                var numLow = -7;
                var numHigh = 7;

                var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;

                var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

                $(this).css("-moz-transform","scale(0.3) rotate(" + numRand + "deg)");
            });
        });

    </script>

</body>

【问题讨论】：

以下是图片以备不时之需：docs.google.com/file/d/0B6j1nO-GTf4PTy1WWWtjSlJIYUU/view docs.google.com/file/d/0B6j1nO-GTf4PZ2FCRHNyajByMDg/view

标签： jquery css image label gallery

【解决方案1】：

我想出的解决方案是将主图像作为 css 背景，然后将“TEEN”叠加层作为实际图像。

您需要使叠加图像（'TEEN'）与实际图像大小相同。

这里是编码的。我已经改变了第一个，并给它一个 .alt 的类来展示给你

http://jsfiddle.net/SbrBz/

【讨论】：

我曾尝试将它作为背景，但我不知道如何让它覆盖实际图像。我试过了，它适用于无图像图片，但如果我尝试放入不同尺寸的不同图片，那么我必须制作一个具有新尺寸和新类别的新青少年图像。