#3 Hover & Borders
☀ The Hush TutorialHover,and Borders
This chapter will be longer than intended so do scroll and be patient while reading. If there's any inquiries, feel free to drop a comment, thank you! :) We will get on each topic one by one. so firstly, let's start with hover.
how to hover on an image.
1. Open your image at a new tab.
2. Copy the URL LINK of the image.
3. On the dashboard. Click the 'IMAGE' icon next before the table / the one after the spelling checker.
4. Once opened, paste the link at the URL section.
5. Go to the 'ADVANCED' section.
6. At the 'ADVISORY TITLE', write out whatever you want.
7. Click 'OK'.
8. Move your cursor at the picture.
9. Hover and your words will appear!.
How to hover on the link.
1. Write your words. e.g. Check out OHTHEYDATEdotCOM page today to find out which idol(s) are currently dating!
2. Select the words. In my case, OHTHEYDATEdotCOM
3. Click on the 'LINK' icon next to 'PREVIEW' icon
4. Paste the intended link at the 'URL' Section.
5. Done. Go to 'ADVANCED' section and on advisory title, write the words !
6. Click 'OK' 7. Now HOVER ON THE LINK-ed WORD.
Check out OHTHEYDATEdotCOM page today to find out which idol(s) are currently dating!
hover on word.
1. Write whatever you want!
e.g. I can see you but can you SEE me?
2. Click on the 'source' button under the BODY, it will appear like this...
< span style= " font-family:courier;font-size:12px;color:#008080;" > I can see you but can you SEE me? < / span >
3. Select the word you want it to be hovered. For I, I'm selecting the word 'SEE'.
4. Now, back again to the source. Write out the hover code.
Which is the < span title = " insert word here " > SEE < / span >
insert the hover code before the word you selected and put the closing tags which is < /span > after the selected word.
this is what it should be like
< span style = " font-family:courier;font-size:12px;color:#00808;" > I can see you but can you
< span title ="insert word here!" > SEE < / span > me? < /span >
5. the result? hover!
I can see you but can you SEE me?
BORDERS
Type of borders. You can see the type by hovering each images.
you can try to mix match the borders name.
the basic type of borders are solid, dashed, dotted, groove, inset and outset.
you can try mix matched them for example...
dotted dashed, solid dotted, double dashed or even double dotted dashed solid.
Coloring the border
the code is that in
< img alt= "" src= "http://24.media.tumblr.com/d96e0ee9c597863d61c19fc140f1c6c1/tumblr+m660sjIDAQ1qewtmpo1_r2_500.png" style=" width: 200px; height: 145px; border-width: 5px; border-style: solid;border-color:#FF99CC;" / > < /p >
in order to color the borders, add the tag of "border-color: (hex code); " as explained in the above example. if you wanted to have four different colors for every sides of the border, add on the tags:
for example, by refering to the color used above.
border-left-color:#F92FF
border-right-color:#FF99CC
border-top-color:#FD406C
border-bottom-color:#FCFF92
Comments