In this tutorial you can study how to make a simple CSS rollover.
First you need to create an image with the normal state and also with the rollover state, see the image I created.
Fresh and Useful jQuery Plugins Which Enhance Usability
How To Create Tabs With jQuery
Amazing Magical Effects Of jQuery
iPhoto like Image Resizing In Javascript
Now that we have an image we need to code the CSS, here is the code I used:
.rollover { width: 374px; height: 144px; background-image: url(rollover.jpg); background-position: top; font-family: Arial, Helvetica; float: left; } .rollover a { color: #fff; width: 374px; height: 144px; display: block; text-decoration: none; } .rollover a:hover { background-image: url(rollover.jpg); background-position: 0px 144px; } .rollover a span { display: none; width: 364px; padding: 5px; } .rollover a:hover span { display: block; }
What this code does? It creates a class with the background being the image I created and then the size of the class half the height of the image I created and the full width. The class then displays the top of the half image normally and then when rolled over it displays the bottom half and any text we put in the span.
Now lets take a look at the html to match this.
<div class="rollover"><a title="example titles" href="http://www.example.co.uk/"> <span> Example Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed at est. </span> </a></div>
This code has the div class to start. Inside that is a link with a title, and also inside that is the span with text inside that will be displayed on top of the image when rolled over.
 |
I harmonise with your conclusions and inclination thirstily look forward to your coming updates.
You picked a good topic for this post and you wrote about it well. I have seen a few other sites with similar content but no 1 has done a better job than you on writing about it.
Brilliant blog! Is the concept custom made produced as well as did you download the item from somewhere? A concept like yours with some basic adjustements would likely truly make our blog page jump out there. Please let me know in which you acquired your layout. Thank you a lot…
I like to impede revealed your blog a three times a week looking for new readings. I was wondering if you beget any other topics you indite about?
Elite blog! I’ve bookmarked it and I’ll beback to read more in the future.
The next time I read a weblog, I hope that it doesnt disappoint me as a lot as this one. I imply, I know it was my option to learn, however I actually thought youd have one thing interesting to say. All I hear is a bunch of whining about something that you may fix if you happen to werent too busy searching for attention.
Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.
Hey, cool web internet site. I seriously came upon this on Bing, and i am stoked I did. I’m likely to definately be revisiting suitable right here a fantastic deal far more frequently. Wish I could add on the write-up and bring just a bit substantially far additional for the table, but I’am just absorbing as substantially data as I can in the second.
I feel like I’m constantly looking in place of interesting things to pore over about a number of topics, but I control to include your situate lot my reads every prime because you procure compelling entries that I look forth to.
I recently found your blog and also have been learning along. I figured I would give my very first remark. I do not know what to mention except that I have liked reading. Solid blog site. I will keep visiting your blog very usually.
I’m new on here, I bat upon this website I repossess It charming productive and its helped me in a lot. I thinks fitting be accomplished to promote & promote other users like it has helped me.
I have got to demonstrate the following to the trainees and find out just what they think about this.
This page appears to get a large ammount of visitors. How do you promote it? It offers a nice unique spin on things. I guess having something authentic or substantial to give info on is the most important factor.