The latest articles on DEV Community by Owl Burger (@aestheticode). https://dev.to/aestheticode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F678404%2F031ac1dd-96ef-49fa-804f-8a159a3d2745.gif https://dev.to/aestheticode en Owl Burger Mon, 20 Mar 2023 21:17:33 +0000 https://dev.to/aestheticode/how-can-i-make-a-dynamic-image-overlay-like-this-using-php-or-nodejs-570d https://dev.to/aestheticode/how-can-i-make-a-dynamic-image-overlay-like-this-using-php-or-nodejs-570d <p>How can I use PHP or node.js to add an overlay and dynamic text for cover images?</p> <p>The frosted/blurred overlay background is dynamically generated using either PHP, or node.js image manipulation. The dynamic text on top of that is the easy part for me. </p> <p>It appears the blurred background of the overlay is a zoomed version of the image on the right side. </p> <p>I start with a base cover image. I can do the text and everything else, but it's the blurred transparent overlay background that I have issues understanding how they did it. the skewed/angle and frosted/blur to be specific.</p> <p>any ideas how this was made using php or node.js?</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Jx77oHTJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfpqeco8goil43po5ebe.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Jx77oHTJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfpqeco8goil43po5ebe.png" alt="Image description" width="880" height="461"></a></p> help