Image effect
2 posters
Page 1 of 1
Image effect
Hello
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:
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>
Re: Image effect
delicious wrote:Hello
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:but the text is displayed normally..
- 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>
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('https://2img.net/h/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
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Image effect
If I want this picture:
https://2img.net/h/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?
https://2img.net/h/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?
Re: Image effect
delicious wrote:If I want this picture:
https://2img.net/h/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
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum