Help - Search - Members - Calendar
Full Version: Hover effect for blog
HTMLHelp Forums > Web Authoring > Web Site Functionality
Adoramus
Hello guys! First I'd like to say thanks in advance to those who help me smile.gif

I'm new to the HTML world, I've been studying html and css for a bit now because I want to design my own web and blog themes. I was wondering how do you write the code to make the pictures look like in this website when you hover your mouse over them:

http://motivationsforlife.one/

And like in this one:

http://vividessentials.co/ *<- you see there's the text like doing a spin when you hover over the pictures, I'd like to know how to write that if possible smile.gif I'd like to keep the picture showing inside the picture when you hover (the logo)

I've been trying to do it but I just don't seem to be able to get anywhere so I decided to seek for help sad.gif If anyone could help me I'd be eternally grateful.

Once again thanks in advance!! wub.gif
Frederiek
It's always tricky to detangle Tumblr code to understand how something is done. I tried, but gave up.

Though not exactly the same effect, but similar can be found at http://tympanus.net/codrops/2011/11/02/ori...ects-with-css3/ . Pick the one you like.
Adoramus
QUOTE(Frederiek @ Oct 17 2015, 07:51 AM) *

It's always tricky to detangle Tumblr code to understand how something is done. I tried, but gave up.

Though not exactly the same effect, but similar can be found at http://tympanus.net/codrops/2011/11/02/ori...ects-with-css3/ . Pick the one you like.


Hi Frederiek! I feel you it's tricky, no matter how much I tried I just couldn't haha, I appreciate your efforts, thanks very much for trying! smile.gif And thanks a lot too for that website, there are some nice ones I will play with and see what can I achieve! biggrin.gif
Frederiek
Tumblr code is often a mess, even the rendered part which is all I can examine and try to understand.

All I could find was the opacity set from 0 to 1 and a some CSS3 transformations (rotate, scale and translate). You'll find that at around line 800 inside a style tags in the HEAD of http://vividessentials.co , just after the font LINK and starts with /* Solaris CSS… .

Adoramus
I am taking a look at that now! smile.gif I'll read and see what can I find, I've been playing with writing other codes but I'm not any closer so I will take my time and look at the entire thing smile.gif

I will come back with the results! Once again thanks a lot for your help Frederiek!
Frederiek
You're welcome.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.