Make images move/expand when you...

User 2071130 Photo


Registered User
7 posts

How do I get images on my website to "move or expand" when someone hovers the mouse over them. I had seen an example of it on the scroll theme but can't figure out how to do this myself.. This is my first attempt at RSD. I was true blue HTML editor and Virtual Site Designer until last month!
User 232214 Photo


COO
827 posts

Glad you're moving over too Donna, your sites and their visitor will thank you! :P

There are various ways depending, on what you want to achieve. If you look at the Black Forest theme you can find examples with explanations. Here's the gist:

Under the Effects (at the bottom of the Design pane) set Scale ot 0.9. Then, at the top if the Design pane use the State dropdown and select Hover. Now set the Scale back to 1.0. Hit Preview on the toolbar to test the hover effect. You probably also want to add a transition to 'smooth' the change. You can do this below the State drop down (make sure you have the Regular State selected again) :cool:

Hope this helps getting you started!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2071130 Photo


Registered User
7 posts

Thank you... RSD is breaking my brain... I miss writing code because I knew what I was doing. However, I love the look of everything we can do with RSD for 1/10 of the work! Just got to jump in and do it.
Sadly I have about 10 sites I built for people that I need to start over with!
User 336851 Photo


Registered User
27 posts

Donna Wildeboer wrote:
Thank you... RSD is breaking my brain... I miss writing code because I knew what I was doing.
I need to look at the plain code sometimes when I get really confused in RSD. So I preview in the browser where I can then view the Page Source. I usually copy & paste so I can enlarge the font for my old eyes and easily read that code. I don't actually miss writing all that but being able to see it all does help sometimes. I guess it's just what we got used to!
Krndel
User 458539 Photo


Registered User
1,635 posts

Far be it from me to offer advice - but here is an example I used. My client loved it

http://terrasond.com/
User 2088758 Photo


Senior Advisor
3,111 posts

Nice website Byron.

Can I make a few suggestions to enhance it? I assume yes lol.
When you get down to mobile size I noticed that the Menu didn't span the full screen. A small margin on either side. I would remove those.

The mini menu (News, List of Clients, Emergency Contact, Contact) looks a little off when nearing mobile size. I would try to put them into their own columns that way you can control the position a little better.

The image at the top, it looks great at full screen. I would change it out as you get smaller as the image is very tiny and also has a margin or padding applied to the row/column. I would remove that too.

I know you never asked so please ignor if these things are intentional. I can't help but to offer my thoughts on design.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 458539 Photo


Registered User
1,635 posts

you kidding - ALL SUGGESTIONS welcome.

This was one of my first in RSD - importing from RLM. There a a couple of things I did I really wish I hadn't but the site is up and working and the clients really like AND they PAID!

Anything else you can add or opinions - I am thick skinned and never thought I would be doing this for a living , so if you have ideas that would be appreciated.

One thing - I have bugged a lot of you hardcore - but I have listened and very thankful for all of the advice I have gotten.

Tip

User 458539 Photo


Registered User
1,635 posts

Steve

I've missed something here - how do you change the image when it changes size. Simply (at the right break point) change the image link to a new pic?

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.