Photoshop Question posted in
The official user guide can be found here.

Image overlays,text on images and other effects through CSS or Photoshop?

I have been meaning to ask this for a long time so here it goes: I am new to the world of Web Design and I am currently working on my First Website. Its a Technology blog, I have thought of a grid layout for the same and now it works great.

However, The Grid that I am using consists of high resolution images related to the topic of the article. I have spend a lot of time searching for various effects on images like overlays(coloured and otherwise), text on images, the proper ways to use text on images etc. So I do think now i have enough knowledge regarding these effects to apply them to the website.

The problem is, I want to make the website responsive, so what happens is, the coloured overlays are rendered just fine on all devices but the text on images which is positioned absolutely just goes off the images sometimes, or sometimes it just isn’t legible enough or sometimes it goes where I don’t want it to go.

So my question to all of you is: Instead of doing all this with CSS, isnt it better to use an image editor like Photoshop or something and then just add these images to the grid?

It will scale much better with this technique? i am new to this so please if its something really obvious, then please try to explain.

Tags:

3

Answers


  1. 0

    Do you have some code that we can look at?

    I have just done something similar with the text in the centre of the image on rollover within a div of it’s own. This could be made to work in your case but you may need to alter the font-size on the smaller browsers so that the text stays where you are wanting this to go

    Login or Signup to reply.
  2. 0

    Image with text are inflexible and maintainability is problematical as you need to change the image evry time you change the text.

    A common technique is to wrap the image in a div that is shrink-wrapped to the size of the image and the position the overlay absolutely (after adding position:relative to the wrapping div.

    Then you can add any text you like to the overlay and style it anyway you like…you can even fade it in and out.

    Like so.

    .wrap {
    display: inline-block;
    position: relative;
}

.wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wrap .overlay {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background: rgba(255,0,0,0.5);
    text-align: center;
    color:white;
    transition: opacity .5s ease;
    opacity:0;
}

.wrap:hover .overlay{
    opacity:1;
}
    <h2>Hover the image</h2>

<div class="wrap">
    <img src="http://lorempixel.com/output/city-q-c-200-200-2.jpg" alt="" />
    <div class="overlay">
        <h3>Las Vegas</h3>
        <p>A city dedicated to a good time</p>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    In my experience it has always been best to use CSS to position the text on top of images. The best thing is to use W3 schools and other online tutorials maybe media queries to ensure the text does not go out of position. May take a bit of extra learning but will be worth it in the end.

    I have always used Bootstrap for example, it has always been so much easier when it comes to responsive design.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search