Hoover Effect - Post ID 293282

User 53728 Photo


Registered User
96 posts

Hi, Everyone,

Using the editor SD v. 3.0 ( Build 2879), can I create a button hoover effect similar to the URL link, available at http://web1.kindlebit.com/clientdemo/de … index.html

Thanks,
Hal
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

Yes, that's easy. The site you refer to was also built in SD3.
When you have created and styled your button(s), select 'Hover' on the Style pane -> 'Apply styles' -> 'In state'. Then you can style it differently for the hover state.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 53728 Photo


Registered User
96 posts

Hi, Inger,
Where is the hover button located on the Style pane?

See, attached image file.

Harold
Attachments:
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

Open the section marked with red, and then go back to the instructions given in my previous post.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 53728 Photo


Registered User
96 posts

Thanks
User 1869666 Photo


Registered User
229 posts

I like the image hover effect at https://www.schultzphoto.com/alaska-photo-tours/
Is this something that can be accomplished with SD v4 build 3285?

On hover, a thin white box appears creating a framed look inside the photo and additional text appears under the title on the photo.

This is an attractive way to present each workshop.
User 2699991 Photo


Registered User
4,817 posts
Online Now

Carolyn Borjon wrote:
I like the image hover effect at https://www.schultzphoto.com/alaska-photo-tours/
Is this something that can be accomplished with SD v4 build 3285?

On hover, a thin white box appears creating a framed look inside the photo and additional text appears under the title on the photo.

This is an attractive way to present each workshop.

Hi Carolyn
Yes something very similar is quite possible to achieve but a little complicated to explain. Also would be easier for me to do a video how to do it if I knew the dimensions of the images and possibly the words that appear. I say this because if you look at that site on a phone then the words that appear don't show
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 1869666 Photo


Registered User
229 posts

Thanks Wayan! Lets just say photos at 640x480 and text something like:

Lake Clark and Katmai National Park Combo Package
A special package to see the best of Lake Clark National Park and Katmai National Park and Preserve

User 2699991 Photo


Registered User
4,817 posts
Online Now

Carolyn Borjon wrote:
Thanks Wayan! Lets just say photos at 640x480 and text something like:

Lake Clark and Katmai National Park Combo Package
A special package to see the best of Lake Clark National Park and Katmai National Park and Preserve



Ok I will be doing the video a bit later still 4.30 am here
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 2699991 Photo


Registered User
4,817 posts
Online Now

Wayan Jaya Space Cadet wrote:
Carolyn Borjon wrote:
Thanks Wayan! Lets just say photos at 640x480 and text something like:

Lake Clark and Katmai National Park Combo Package
A special package to see the best of Lake Clark National Park and Katmai National Park and Preserve



Ok I will be doing the video a bit later still 4.30 am here


Hello again
I have done a short demo video showing something like the Hover Effect (couldn't figure out how to do a HOOVER effect) :)

https://youtu.be/mnWCWXjajE8

This is done straight within Site Designer, it's pretty close to the example on the website you mentioned, but I wanted you to look at it first to see if it's anywhere near to what you want..before I went ahead & did a tutorial How to video

There are no outside thingies needed (JS or custom CSS etc) if however, you wish to emulate the effect closer to the example you gave then there would have to be some custom CSS and perhaps a little bit of custom JS involved

Have a look-see & if it's what you are after then let me know

Take care over there as usual

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/

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.