Is there a way to auto add gradient to images?

user_13520358 0
Viewed 89

enter image description here

Here is my code:

<div class='my-posts-container' id='<%=postobj._id%>'>
        <%var menuid='menu'+postobj._id%>
        <%var imagesource='../'+postobj.blob.path%>
        <div class="my-posts-container-header">
             <%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%> 
        </div>
        <div class="menu hide" id="<%=menuid%>" >
            <ul >
                <li><button onclick="viewpost('<%=postobj._id%>')"  >view</button></li>
                <li><button onclick="removepost('<%=postobj._id%>')"  >remove</button></li>
                <!-- <li><button onclick="copypostlink('<%=postobj._id%>')"  >copy link</button></li>
                <li><button onclick="editthispost('<%=postobj._id%>')"  >edit</button></li> -->
            </ul>
        </div>
        <div class="post-image" >
            
                <img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
    
        </div>
       
        <span>
            <%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
        </span>
        <hr>
        <div class="caption"> 
            <%=postobj.caption%> 
        </div>

I want to keep my image size as 400px *400px but add a background colour .post_image div, basically, I want to add a gradient to the background based on any image in the image tag, something like this,

enter image description here

so that the whole 400 X 400 size is covered is this possible to achieve, if not can you suggest me other options, Thanks.

css html javascript
2 Answers

You can achieve something similar with CSS

Considering using this stylesheet

<style type="text/css">
  .blured {
    width:320px;
    height:320px;
    position: relative;
    overflow: hidden;
  }

  .blured .blur {
    height:70px;
    width:100%;
    position:absolute;
    filter: blur(7px);
  }

  .blured .top {
    top:0px;
    background: linear-gradient(#000000d9, #00000000)
  }

  .blured .bottom {
    bottom:0px;
    background: linear-gradient(#00000000, #000000d9)
  }
</style>

Then use the following markup

<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
  <div class='blur top'></div>
  <div class='blur bottom'></div>
</div>

The result will be something like this:

enter image description here

You can experiment with linear-gradient colors and the value for blur() to achieve an output close to your requirement.

References:

user_1496360

The effect you describe can actually be achieved. You just need to stack the same image with a smaller size on top of the image. The image underneath can then be blurred out and it will span the remainder of the 400px x 400px area.

To do this, you need to set the position field of the enclosing div to relative and that of both the images to absolute. I have reduced the height of the image sitting on top to 200px and kept the image width the same as the image underneath to resemble the style of the image in the question. Use filter: blur() to blur out the larger image. Blurring softens the edges of the image (Remove the clip property and you'll know). Use the clip property to make the edges look "crisp".

I have used this image. Run the code snippet below to see it in action:

<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
    margin: auto;
    position: relative;
    width: 50%;
}
.outer {
    filter: blur(5px);
    position: absolute;
    z-index: -1;
    clip: rect(0,400px,400px,0);
    
}
.inner {
    position: absolute;
    top: 100px; 
}
</style>
<div class="container">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>

This answers part of your question. Now, to automate the image placement as per size, you can retrieve and update the image dimensions using JavaScript:

var image = new Image();

image.onload = function() {
  var height = image.height;
  var width = image.width;

}

image.src = "<source>";

The image underneath will always be 400 x 400 px, you can update the attributes of the image on the top as per its actual retrieved dimensions if it is smaller than 400 x 400 px. Otherwise, squash it down to 400 x 400 px to cover the entire image underneath.

user_114551050
Related