Image tricks with responsiveness

So i have been searching around website types for inspiration, and i came across a cool website -->

Now when it comes to that main image and resizing, how is it done? It doesn’t seem to get proportionally smaller, rather it seems to loose the image on both sides evenly when you resize it. Then on mobile the entire image itself gets slightly smaller height wise.

How can i get this affect?

I was also wondering how it is possible to get text on a image itself maybe using flexBox?

If you want to know what CSS is being applied to an element on a page and you are using Chrome, you can right mouseclick the element and select Inspect and then view the styles applied to it. See below for what was applied to the div containing the image.



Thanks, i have seen that before but i never really knew how to use it. That solved the image question.

What about the elements over it? I want to be able to put another item over the image, most likely text and button(s).

I heard it might have something to do with z-index. W3 schools had something like this, but i don’t know how to (like in that website).

Any ideas?

Yes, W3 schools has the following article on the subject. My suggestion is to play around with the code on W3 and see how changing the values of top, left, right, and bottom affect the text position over the image.

Yeah but the method w3 school uses doesn’t work with background images stated above --> Image tricks with responsiveness

If you want to center text over a background of say a div element, you can use many different methods. See the following link for information on how to center just about anything anyway you want. I reference this guide often.

1 Like

Thanks again, i have another question,

How would i go about blurring just the background of a item? If i overlay text on a image, how can i blur the background of that text?

Every solution i see uses 80 - 120+ lines of css code to accomplish this.

Can you explain exactly what you mean by “blur the background of an item”?

This was the pen i was working on -->

<div class="main-img"> <!-- 26, 117-->
        <div class="text-overlay"> <!-- 43 , 110-->
          <h2>Join the Millions today</h2> <!-- 53,  94, 114, 148-->
          <h2>Take the survey</h2>
          <button>Start Now</button> <!-- 56, 90, 106, 144-->

You can see i have text over the image, and all that text is in a div, text-overlay. That div is over a image, main-img.

How can i blur the part of the img in which text-overlay is covering.

Almost like --> but it is limited to my text (div) and isn’t 35 lines of code.

It is not about the 80 or 120 lines of code, its just a css property, ex: filter: blur(10px);

1 Like

As Sujit said and i would also add:

filter: blur(10px);

Since you wanted to blur on hover. Just use pseudo selector “:hover” on wanted “real” selector.

Just keep in mind the filter property is not supported in IE 11 or Opera Mini. If it is important to support those browsers you would need to refer to the CSS code you probably found earlier which had many lines in order to produce the same effect was probably to support older browsers. The other alternative is to use a Polyfill.

1 Like

It also seems to blur the text itself also.

I feel like i got everything i need currently, thanks for all the help :smiley:

Yeah i agree, and for IE they have provided -ms-filter, but that doesn’t seem to be good,

Rather we can use a blurred image on top of the bg image and adjust its opacity.

@michaelnicol since you applied to the div containing the text it will blur the entire block, try using a separate div for image and position absolute you can see your text then, but you can try something i mentioned above

1 Like