The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Image effect

View previous topic View next topic Go down

Image effect

Post by delicious on January 2nd 2013, 3:19 pm

Hello Smile
how do that:
http://skyfall.omgforum.net/ column "administration" it's cool thing, when move your mouse on the picture the text appears. How do that?
i have this code:
Code:
<center>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<style>
.sofetch { background: #ffffff; width: 300px; height: 100px; overflow: auto; transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s; opacity: 0.0; }
.sofetch:hover { opacity: 0.85;}
</style><div style="width: 320px; height:120px;  background: url('http://i1140.photobucket.com/albums/n575/wildglamorous/bomer.gif'); border: none;"><div class="sofetch" style="text-align: center; padding: 10px; "><div style="color: #924458; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 90%;">
nathan luke howard
</div><div style="color: #000000; font-family: trebuchet ms; font-size: 10px; text-align: justify; line-height: 120%;">
PS meistrė (net ne) kuri užsiknisa bedarydama logus ir panašius š. bet šiaip draugiška gan ir fainai nefaina ^^
</div><p></p>
<br></div><br></div></center>
but the text is displayed normally..

delicious
Forumember

Female Posts : 213
Reputation : 1
Language : lithuanian

http://wildchild.forumlt.com/

Back to top Go down

Re: Image effect

Post by kirk on January 2nd 2013, 3:47 pm

@delicious wrote:Hello Smile
how do that:
http://skyfall.omgforum.net/ column "administration" it's cool thing, when move your mouse on the picture the text appears. How do that?
i have this code:
Code:
<center>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<style>
.sofetch { background: #ffffff; width: 300px; height: 100px; overflow: auto; transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s; opacity: 0.0; }
.sofetch:hover { opacity: 0.85;}
</style><div style="width: 320px; height:120px;  background: url('http://i1140.photobucket.com/albums/n575/wildglamorous/bomer.gif'); border: none;"><div class="sofetch" style="text-align: center; padding: 10px; "><div style="color: #924458; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 90%;">
nathan luke howard
</div><div style="color: #000000; font-family: trebuchet ms; font-size: 10px; text-align: justify; line-height: 120%;">
PS meistrė (net ne) kuri užsiknisa bedarydama logus ir panašius š. bet šiaip draugiška gan ir fainai nefaina ^^
</div><p></p>
<br></div><br></div></center>
but the text is displayed normally..


I Think the text overlay is imported from a style sheet.
http://fonts.googleapis.com/css?family=Oswald

then they have this uploaded/hosted somewhere. i dint download it and not 100% certain.
http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff

Then the background image is the photobucket link below in the code.

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<style>
.sofetch { background: #ffffff; width: 300px; height: 100px; overflow: auto; transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s; opacity: 0.0; }
.sofetch:hover { opacity: 0.85;}
</style><div style="width: 320px; height:120px; background: url('http://i1140.photobucket.com/albums/n575/wildglamorous/bomer.gif'); border: none;"><div class="sofetch" style="text-align: center; padding: 10px; "><div style="color: #924458; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 90%;">
nathan luke howard
</div><div style="color: #000000; font-family: trebuchet ms; font-size: 10px; text-align: justify; line-height: 120%;">
PS meistrė (net ne) kuri užsiknisa bedarydama logus ir panašius š. bet šiaip draugiška gan ir fainai nefaina ^^
</div><p></p>
<br></div><br></div></center>


So you would have to host the text overlay image you want with like the same set up they have. like on a html page, then add the html page link

where they have this one.
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

And even that way depending on what images you are using a lot of things may need to be adjusted.

If it was me i would just use a basic mouse over image code.

what image do you want to use, and what test do you want to go over top of it with a semi transparent text image, i can create you a much easier code to use, i just need the two images you want.

Like i said i am not 100% certain how or what they used for the text overlay but it is imported,
But there is much simpler way to get something like this with a tiny bit of Photoshopped imaging with the text over lay and simple mouse over image code.


Last edited by kirk on January 2nd 2013, 3:59 pm; edited 1 time in total

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Image effect

Post by delicious on January 2nd 2013, 3:56 pm

If I want this picture:
http://i1140.photobucket.com/albums/n575/wildglamorous/bomer.gif
and when I move mouse on the picture, shows the text: amm.. "Adam Ward"? how do the code? simple?

delicious
Forumember

Female Posts : 213
Reputation : 1
Language : lithuanian

http://wildchild.forumlt.com/

Back to top Go down

Re: Image effect

Post by kirk on January 2nd 2013, 4:12 pm

@delicious wrote:If I want this picture:
http://i1140.photobucket.com/albums/n575/wildglamorous/bomer.gif
and when I move mouse on the picture, shows the text: amm.. "Adam Ward"? how do the code? simple?

Well actually i am not sure if the text overlay is a image now that i think about it.
It may be some additional javascript coding they are using that gives it the fade effect then with the text over it,

when i went to this link on the imported script page,
http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff

It is something from googleuser.com? whatever that is.. i am not familiar with it.
for all i know it may be something you have to register to to use the scripts, i am just guessing not sure


Or may be it's a additional javascript, If so then that would have to be adjusted for what you want, uploaded to a javascript host and the link added in the style page code the same way they have it.

then all you would do is host the style page on your own html page and place the html page link in the code you have,

The way i was talking about with a simple mouse over code would work, But it is not going to give it that fade in effect, so i would have to try to download that file, and see if i can open and adjust it etc...

So give me a lil time to see if that is how it is or not, if i knew what type of effect/script this is called, then i am sure you can find many scripts/codes for it.. but i am not sure what that would be called.. lol

So let me test out a few things and i will get back to ya.. worst case scenario i will just do a lil mock up of the mouse over thing i was talking about.

You can also see if someone else replies to, i am sure there is someone here that would know exactly what that is called and may even have script code you can set up your self as well.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum