How to create background zoom effect? [Solved]

HTML & CSS
1

Hi all,

I am wondering if anybody has an idea how I could recreate the effect shown in the attached image?

Sort of a sold zoom, background effect.

Any suggestions, thanks!

background-zoom-effect

I’ve created a basic jsfiddle box example, hopefully we can build on this: https://jsfiddle.net/od84t2wa/

2

My first thought would be text-shadow with a load of repeats.

e.g.

.box h2 {
  font-size: 40px;
  font-weight: 900;
  text-shadow: 1px 1px 0px blue, 2px 2px 0px blue, 3px 3px 0px blue,
    4px 4px 0px blue, 5px 5px 0px blue, 6px 6px 0px blue, 7px 7px 0px blue,
    8px 8px 0px blue, 9px 9px 0px blue, 10px 10px 0px blue, 11px 11px 0px blue,
    12px 12px 0px blue, 13px 13px 0px blue, 14px 14px 0px blue,
    15px 15px 0px blue, 16px 16px 0px blue, 17px 17px 0px blue,
    18px 18px 0px blue, 19px 19px 0px blue, 20px 20px 0px blue,
    21px 21px 0px blue, 22px 22px 0px blue;
}

You can probably automate that in scss if you want.

There’s probably some obscure filter that may be possible also.

1 Like
3

Looking good: https://jsfiddle.net/Lstvopm1/

I have been searching for filters, nothing I could find. Yes, maybe see if I can create some sort of scss mixin to to the heavy lifting.

Cool, got me on the right path, thanks Paul! :sunglasses:

2 Likes
4

Grr…I tried to see if I could load it dynamically via JS but can’t get it to stretch to the bottom of the box. It’s like it’s getting extra padding or something but I just don’t see it… :speak_no_evil:

5

You need to keep adding extra text shadows, the bigger the number, the bigger the stretch of the shadow. Nothing to do with padding.

See here for updated example: https://jsfiddle.net/Lstvopm1/1/

The reason we mentioned a sass mixin to reduce the workload.
Personally, javascript is overkill ha :slight_smile:

6

I was trying to use the element dimensions to calculate the appropriate text shadow. Just a different way to approach it so you didn’t have to keep figure out how much shadow to use. Mental exercise than anything…

It’s not that much code. There is more logging there than anything else.

1 Like
7

Maybe align it at the top and then move it to the middle after the shadow has been added.

Roughly like this.

8

Here’s the SCSS version.

1 Like
9

Fair shout, Dave :+1:
Nice to see other ways of doing things, and you make a good point regarding the element dimensions. I did think about this.

Paul has supplied a couple of working solutions to solve things.

Now wondering which one is best :grinning:
I think I prefer the sass way, ties in with my scope of work.

I was trying the below, Paul:

.box h2 {
    @for $x from 1 through 3 {
        text-shadow:#{$x}px #{$x}px 0px blue;
    }
}

The only problem we my snippet, the text-shadow keeps repeating:

.box h2 {
  text-shadow: 1px 1px 0px blue;
  text-shadow: 2px 2px 0px blue;
  text-shadow: 3px 3px 0px blue;
}

Just for reference, how would I change it so it only shows the text-shadow once?

10

You have to build it separately into a variable.

e.g.

$value: ();
  @for $i from 1 through $boxheight {
    $num: $i + px;
    $theShadow: $num $num blue;
    $value: append($value, $theShadow, comma);
  }
  text-shadow: $value;
2 Likes
11

That explains why I couldn’t get things to work :upside_down_face:

That’s perfect just what I need.
Cool, and thanks for the examples!

:+1:

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.