Need help giving a modern gallery labels
Question
I'm making a portfolio site and I want to include some of my work from middle school, but I want to put a label on it to distinguish it.
The gallery is a bunch of images of different heights and widths on a small scale and slightly rotated, when you hover over a image it grows to normal size.
The top half of this image is what it is now and the bottom half is what I want it to be.
I tried making a span with the label and the image inside it but it didn't work.
Here's 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>
1 answers
solution1
0 2012-08-01 15:33:32
The solution i've come up with is to make the main image as css background, then have the 'TEEN' overlay as the actual image.
You need to make the overlay image ('TEEN') the same size as the actual image.
Here it is coded up. I've changed the first one and given it a class of .alt to show you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.