Scroll over pictures

So your teacher told you to make your images page look fancy and you haven’t the foggiest idea how to do it? No worries. Making pretty pictures is not as complicated as you think.

1. Go to your CSS file and create a new line. Create a selector of a and we’re going to name it image label (a.imagelabel). Make sure to open and close it with brackets. We’re using a because it allows us to do things when the text is hovered over on your webpage. In the brackets, write out the features you want to appear on your image text. I wanted by text black and I wanted my text to be underneath each other in a column, which is the display:block. Finally I didn’t want the text underlined so for text-decoration I put none.

2. Next we’re going to make a selector for the image itself. This will place it away from the text as well as make sure it doesn’t show up until we want it to. Position and display keep the image on the right side of the page as well as hiding it from immediate view.

3. This is the last step in CSS for now. The last rule will facilitate the hover over which will allow the viewer to see your images when you scroll over the text. This will override display:none; rule of hiding the image from view.

4. Now go to your image page. Apply the CSS you just created on this page. Put the class as imagelabel so that it will follow the CSS rules. The reason href is used is so that the a elements could be hovered over.

5. Source your image into the rule and write the label you want to see as the title of the image.

6. Then finally upload your page and the CSS file onto your webpage while marveling at your brilliance.

This random thing is brought to you by Cameron T.


~ by ourladyofperpetualsarcasm on September 17, 2012.

%d bloggers like this: