我正在制作一个作品集网站，我想包括一些我在中学时的作品，但我想在上面贴上标签以区分它。
画廊是一堆不同高度和宽度的小比例图像，并稍微旋转，当您将鼠标悬停在图像上时，它会增长到正常大小。
这个 image 的上半部分是现在的样子，下半部分是我想要的样子。
我尝试用标签和其中的图像制作一个 span，但它没有用。
这是我没有标签的代码:
<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>
最佳答案
我想出的解决方案是将主图像作为 css 背景，然后将“TEEN”叠加层作为实际图像。
您需要使叠加图像(“TEEN”)与实际图像大小相同。
这里是编码。我已经更改了第一个并给它一个类 .alt 来展示给你
关于jquery - 需要帮助给现代画廊标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11762193/