Question

我正在制作一个投资组合网站，我希望将我的一些工作包括在中学，但我想在其上加上一个标签来区分它。

图库是一组不同高度和宽度的小图像，稍微旋转，当您将鼠标悬停在图像上时，它会变长到正常大小。

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

Answer 1

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

您需要使叠加图像（'TEEN'）与实际图像的尺寸相同。

这里编码了。我已经更改了第一个并给它一个.alt类给你看

http://jsfiddle.net/SbrBz/

需要帮助提供现代画廊标签

1 个答案: