Now we’re going to put our #overlay div to some use and fade in it and then back out again. You will now notice that all we see is our image which is great. To get around this we will need to hide these elements using jQuery, let’s put those variables to use.
If you’ve previewed the code we have written so far you will have noticed that the divs just all sit on top of each other hiding our image which is not good. The reason for setting variables in our code here is really just to save repeating code, which in this case is very useful. Alternatively we can put our jQuery in our the just above our closing body tag in the footer which will automatically let the page load before running our script, which means we can remove our document.ready function all together. To do so we need to insert an opening and closing script tag in the head section of our document.īasically, what we’re doing here is telling our code not to run unless the document has fully loaded and ready to do so. Now for the fun stuff, we can start to animate our content using a little bit of jQuery. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. You can place whatever you like in your div but for now I’m just going to place in some dummy content. position, we’ve positioned this div as absolute again so that we can control where we place in in our container div.Width and height, you may have noticed we’ve reduced our width and height here – reasons being we want to use padding so that our content isn’t squashed in.Now let’s add the styles for our final div #hover, which contains the content in our sliding effect. We’ve set this as 1 so that it sits on top of our image. This will place are div at the very top and very left of our container div, we will change the left position using jQuery later. We set this as absolute so that we can position it anywhere we like in our container that’s positioned as relative. We can change this colour to what ever we would like the effect to be, for example #fff for white.Īs the div is an empty one we need to display it as block. This is the div which ill give us the semi-transparent black effect that fades in over our image, let’s add the styles again to our css file and go through some of the important styles. Places the div at the bottom of the pile which gives us the transparent look from the div above. This style basically hides the two child dives which gives the effect of them sliding across the image. We set this to relative because we need to set the child divs as absolute so that we position them our of view – this is an important style. The container is the div that displays our image, which the two other divs (#hover and #overlay) will slide over. Now the page has a little colour we can add the style to our divs, we’re going to start with the #container div this way we can talk through the reason for having certain styles. You can mess around with these colours as much as you like, it’s all down to preference really.įont-family:Arial, Helvetica, sans-serif Open up the css file we created earlier named “style” and let’s add some style to the page just to make it a little less bland. Include this html inside the tag of the index file. Now we’ve included our necessary files for this effect to work let’s get dow to adding some html to our document. In this tutorial we are going to link to the google api version of jQuery as the chances are your user has come across this file at some point so it was already be cached on their system. Getting back to our index file, we now need to include our newly created css file and the jQuery library into the head of our document. Now create a new css file and save this as “style.css” in a new folder named “css”. Ok let’s start by opening our text editor and creating a new html document, save this to your desktop as “index.html”.