I am in the process of creating a portfolio website and I want to showcase some of my work from middle school. However, I would like to add a label to differentiate it from my current work.
The gallery features various images with different dimensions displayed on a small scale and slightly rotated. When you hover over an image, it enlarges to its original size.
The top half of this image shows the current state, while the bottom half depicts how I envision it to be.
I attempted to place a span with the label and the image inside it, but unfortunately, it did not work as expected.
Below is my code without the label:
<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>