Image tricks with responsiveness

HTML-CSS
1

So i have been searching around website types for inspiration, and i came across a cool website --> http://www.collins-llc.com/

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?

3

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?

5

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

6

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
7

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.

9

This was the pen i was working on --> https://codepen.io/Mike-was-here123/pen/vaRjey

<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-->
        </div>
      </div>

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 --> https://codepen.io/anthonyadamski/pen/yJBpd but it is limited to my text (div) and isn’t 35 lines of code.

10

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

1 Like
11

As Sujit said and i would also add:

#yourElement:hover{
filter: blur(10px);
}

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

13

It also seems to blur the text itself also.

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

14

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