#3 Hover & Borders

☀ The Hush Tutorial

Hover,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


 

 

Like this story? Give it an Upvote!
Thank you!
nebulous
H: sorry if suddenly it's out of the tags. i was updating this threa.d

Comments

You must be logged in to comment
MrSkittles
#1
Chapter 57: The link of the f(x) hq one doesn't work. :C
jeonnamjoo
#2
Chapter 48: thank you so much for this tips, i will used it jusseyo! :)
wingly
#3
Chapter 12: Thank you so much for these tutorials! Your hard work is much appreciated! ♡
babybubblevcrack
#4
Chapter 43: thank you so much for this! I just checked the wordstuck one and wow, it's amazing!

I'll check the other one soon and hope you can come with another beautiful things, hehe~^^
Pasta_Noona #5
Chapter 14: I can't seem to get the border-radius to work the corners...