ポートフォリオサイトを作っていて、中学時代の作品を載せたいのですが、区別できるようにラベルを付けたいです。
ギャラリーは、高さと幅が異なる小規模な画像の集まりで、わずかに回転しています。画像にカーソルを合わせると、通常のサイズに拡大します。
この画像の上半分が現在のもので、下半分が私が望むものです。
ラベルとその中の画像でスパンを作ってみましたがうまくいきませんでした。
ラベルのない私のコードは次のとおりです。
<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>