Blackbearsfire

Does anyone know how to acompllish this effect on the second section of this page?

https://www.fudbuddies.io

It looks to me like a clever use of Parallax scrolling with images of text, but I can't wrap my head around how to execute this.

Thanks!

@Ziggy I tried but it didn't seem to work..

I'm looking to embed some html that was provided by Mailchimp for a newsletter signup.

I'm trying to embed it on the footer of my site rather than the header. Does anyone know if that's possible?

When I try to embed it as a code block it doesn't work correctly.

Thanks @Ziggy, where would I insert this code to make it apply to the entire site rather than a block id?

Can anyone help me with a custom css code to change the color of hyperlinks on hover in all pages? 

Using SS 7.1

Thanks!

I was trying to use it the same as before on an image block in 7.1

When you first posted the code I tried it and it worked. This time I tried it the image fades but nothing happens when I hover over it.

I also tried it in a Fluid Engine page but that didn't work.

On 10/21/2022 at 9:18 AM, Ziggy said:

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Last time I tried this code it worked but today I'm not having any luck.

Any ideas? @Ziggy

I'm trying to create a hover effect on images in Fluid Engine. 

I found some custom css to inject that creates this effect on insidethesquare:

https://insidethesquare.co/squarespace-tutorials/reveal-text-hover-fluid

Does anyone know how to change the background color of the text box from grey to a custom color?

Thanks!

Is there a list of class IDs to target different types of images with custom css?

On 10/21/2022 at 9:18 AM, Ziggy said:

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Is there a list of class IDs to target different types of images?

Anyone know how to make an animated number counter without using Elfsight?

7 minutes ago, Ziggy said:

Nope, that was me missing something:

.sqs-block-image img {
  opacity:0.6;
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

I deleted a semicolon, just to demonstrate how easy it is to have mistakes in code.....or maybe just by accident!

Ha ha awesome. Thanks!!

23 minutes ago, Ziggy said:

This will make images have an opacity of 60% and 90% when hovered on.

Place in Custom CSS under the Design dashboard option.

.sqs-block-image img {
  opacity:0.6
  transition:ease-in-out 300ms;
  &:hover {
    opacity:0.9;
  }
}

You can replace .sqs-block-image img with anything you want, block IDs list sections, gallery images etc.

Placing this as is gives me a Syntax Error on line 2. Am I missing something?

17 minutes ago, Ziggy said:

It is probably worth saying that CSS can have impacts across your website, and you should be careful to understand what you're adding before doing it, or employ someone who does know to avoid a potentially broken website.

Thank you, much appreciated!

2 minutes ago, Ziggy said:

You can add a hover effect to any block in CSS, and set an opacity. You would just need the block ID if you wanted to target one individual block, or a class if you want to target all image blocks on a page or more.

Can you point me to a code snippet I could try in the custom CSS?

27 minutes ago, bangank36 said:

Can you share your site Url and protected password (if you have) so I can take a look?

I was just playing around with templates in 7.1 to see if this could be accomplished, so I don't have the site yet.

I wanted to see if this could theoretically be achieved first.

Hello!

I'm looking to create an opacity hover effect on images that will include a clickthrough link.

I'm not sure if this can be achieved in a grid, gallery, list or just individual images.

I want the opacity of the images to fade when hovered over and be able to be linked to other pages when clicked.

Thanks!

Can someone post the css code to add the hover effects into the navigation links like changing color or opacity?

This used to be easy to accomplish on version 7 in templates but I don't know how to code it into my site on 7.1