Recently, whilst working on a client’s website I had to incorporate image overlays into their portfolio page. I had seen Mosaic mentioned before on various websites and blogs, but I had never used it. I was disappointed at the lack of documentation, but nevertheless it proved to be a nice, light (~2kb minified) jQuery plugin that did exactly what it said on the tin. I thought I would document how to get going with a quick mouse-over animated overlay which will hopefully save someone some time.
The Setup
After you have downloaded the source code from here and extracted the files into the root of your project we need to setup our HTML tags ready for work. We need to include a blank CSS file, the Mosaic JavaScript file and jQuery (I am using jQuery 1.5.1). Our HTML file should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mosaic Test</title> <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /> <script type='text/javascript' src='js/jquery/jquery.min.js'></script> <script type='text/javascript' src='js/mosaic.1.0.1.min.js'></script> </head>
Mosaic Structure
Mosaic makes use of a container and two child elements to implement the overlay. The first child will contain the HTML to be shown in the overlay (when it animates into view), and the second element will contain the image which will be used under the overlay. This is made clearer when we see the markup…
<div class="mosaic-block bar">
<div class="mosaic-overlay">
<div class="details">
<h3>Sample</h3>
<p>This is a caption of the sample image</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src="img/sample.jpg" alt="" /></div>
</div>
</div>
We now have our bare bones structure ready for styling and scripting. The CSS classes will explain themselves in the next section.
Styling
Mosaic provides several solutions out-of-the-box in its included CSS file. You can go straight ahead and include the mosaic.css stylesheet and use one of the pre-made solutions, but for the sake of working towards a clean example we will demonstrate the styles required to implement our solution.
The first thing we need to style is the image and it’s container. Mosaic uses a box-shadow specific to webkit, but we can add in support for Mozilla and IE9. We also want to set the height and width of the image wrapper, obviously this will change depending on your image. If you’re generating markup from PHP or another server-side language, we can leave this out of our class style and declare it inline for each image element.
.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:270px;
height:240px;
margin:10px;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
If you’ve looked at the mosaic.css file you will also notice that I’ve left out the progress loading gif as well. Personally I don’t see the benefit of this (unless you’re loading a particularly large image), so I leave it out. Next comes our overlay and backdrop styles, which are identical to those in the mosaic.css file included in the source:
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
background:#111;
}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#111;
}
The next style is specific to our implementation. Depending on the height of your image you may wish to alter the height and bottom CSS properties in the following declaration. These determine the height of the overlay that shows over the top of the image. A good rule of thumb is to set the height of the overlay to about a third of the height of the image.
.bar .mosaic-overlay {
bottom:-80px;
height:80px;
background:url(../img/bg-black.png);
}
The only styles left now are specific to the text content in our overlay. We’ll go with a white Arial font for clarity…
.mosaic-overlay .details {
font-family:Arial, Helvetica, sans-serif;
color: #fff;
font-size: 13px;
padding: 3px
}
We’re now ready to begin scripting our overlay.
Scripting
Initialising the Mosaic overlays is very simple, after the document is ready we can use a jQuery selector on our bar class and call the plugin method .mosaic() with a one-property config object. Your script tag should look something like this…
<script>
$(function() {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
Our animation property in the config object determines the style of overlay that will be used. There are two options available, slide (what we’re using in our example here) or fade. If we want to implement the fade animation then we can need to create a separate CSS class as follows:
.fade .mosaic-overlay {
background:url(../img/bg-black.png);
}
Don’t forget to update the class in your markup from bar to fade (you can use whatever class names you want, but I’ve used the names setup by Mosaic to keep it simple).
You should now have a working image overlay which activates when you mouse over your image. You can see my working example here. Combined with custom images and CSS you can use Mosaic to create some really interesting overlays.
2 Comments
Sorry i don’t understand. I need your help please.
Why not working? I paid 9$ and World of Warcraft sword is same and not glow?? Where do I put those codes to get free glow sword? Why??????