Display the outline of a translucent image

Looking to create an image reveal effect on my website.

I want to display only the outline of a transparent image using brightness, then gradually reveal the full image by removing the brightness effect.

Currently, I achieve this with a black outline using the brightness filter in my code snippet. However, I would like to customize the color of the outlining shape, opting for red instead. How can I achieve this using CSS and/or Javascript?

.mask-img{
  width:50%;
  filter: brightness(0);
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>

javascripthtmlcssreactjs

Answer №1

To achieve the desired effect, make use of the mix-blend-mode property. You will need to adjust the coloration and blend mode based on the specific image you are working with.

.mask-img {
  width: 50%;
}
.container {
  position:relative;
  z-index:0;
  background:#fff;
}
.container:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:red;
  mix-blend-mode:hue; /* or 'color' for a different visual effect */
  opacity:1;
  transition:0.5s;
}
.container:hover::after {
   opacity:0;
}
<div class="container">
  <img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of React in tandem with Express

My web site is being created using the Express framework on NodeJS (hosted on Heroku) and I'm utilizing the React framework to build my components. In my project, I have multiple HTML files containing div elements along with React components that can ...

javascriptnode.jsexpressreactjs

Using ui-grid to show cells as drop-down menus

I have a ui-grid example where one of the columns represents gender ('Gender': male, female...). The json data binding to the grid only contains code types like (1, 2, 3...). However, I want to display the gender name such as 'male' if ...

javascriptangularjsselectangular-ui-griddropdown

What could be causing the Twitter Timeline to fail to load based on a variable in a Vue.js component?

My goal is to display the Twitter timeline of multiple accounts based on the route. I initially attempted to use a plugin called vue-tweet-embed, but encountered issues with it. As a result, I resorted to the traditional method by embedding twitter's ...

javascriptvue.jstwittervuejs2vue-component

Display information on a table using AJAX within the current webpage

I am encountering an issue with ajax on the same page. Below is my code: $.ajax({ type: "POST", url: "test.php", dataType: 'json', data: {}, success: function (data) { ...

javascriptjqueryajax

Discovering the source DOM element that initiated ng-change

I am currently working with angularJS and have multiple <select> elements on my webpage, each with its own ng-change function. Here is an example: <select id="hairColorComponent" ng-model="hairColor" ng-options="option.name for option in ...

javascriptangularjs

Puppeteer: How to wait for an ajax call to complete after a navigation event

When working with my code, I encounter a situation where I need to submit a form, wait for navigation, and then submit a second form. The challenge arises because before submitting the second form, some data needs to be loaded in the form using ajax. I wa ...

javascriptnode.jspuppeteer

Automating the process of uploading a file to a Github repository using JavaScript and HTML

Recently, I've been tinkering with updating a file in my GitHub repository using code to set up an automated system for pushing changes without manual intervention. My approach involved creating a function that utilizes a GitHub access token to ' ...

javascripthtmlexpressgithubrequest

Executing the process of launching an entity and then promptly erasing it from the screen

I'm really stuck on my code and could use some help. I have a ship that is shooting and aliens moving towards it. I want the bullets to hit the aliens, remove them from the canvas, and keep doing so until all the aliens are gone. I've been thinki ...

javascriptcanvashtml5-canvas

Issue when calling .create() method on Mongoose schema: "this expression is not callable" error in TypeScript

Encountering an error with the .create method on a mongoose model in Next JS while making a call in an API route. The get request is functioning properly... The structure: pages>API>task.tsx import dbConnect from "../../util/dbconnect"; im ...

reactjsmongodbtypescriptmongoosenext.js

Is there a way to send a request before opening a new page that doesn't involve using synchronous XMLHttpRequest on the main thread, which is

With the deprecation of synchronous XMLHttpRequest, I am curious about any potential alternatives to achieve a similar behavior. Non-blocking asynchronous XMLHttpRequests may not always be suitable for specific cases. I am specifically referring to a scen ...

javascriptxmlhttprequestdeprecated

Having trouble with the Ng multiselect dropdown displaying empty options?

I'm currently facing a challenge in adding a multiselect dropdown feature to my project. Below is the code I have been working on: HTML <ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple> </n ...

javascripthtmlcssangulartypescript

What is the method to retrieve the local filepath from a file input using Javascript in Internet Explorer 9?

I'm experiencing some issues with the image-preview function on IE9, similar to the example photo shown. This method is not functioning properly and throwing an error in IE9, while it works perfectly fine in IE6-8. I am looking for a way to retrieve ...

javascripthtmlinternet-explorer-9

Using Express.js to Serve Static Content on a Dynamic Route

I am working with the app.js code below; app.use(express.static(__dirname + "/public")); app.use("/example", express.static(__dirname + "/public")); app.engine("html", require("ejs").renderFile); app.get("/", (req, res) => res.render("index.ejs")); a ...

javascriptnode.jsexpressdynamicroutes

Guide on building a multi-page application using Vue or React

I find myself a bit confused when it comes to single-page applications versus multi-page applications. While I am aware of the difference between the two, I am struggling with creating a MPA specifically. Up until now, I have built various apps using Rea ...

javascriptreactjsvue.jssingle-page-applicationmulti-page-application

Leverage AJAX to fetch data from the database

I've been exploring different methods to automate the process of copying a database table. While replication was suggested as an option, I found it challenging to set up properly. Therefore, I have decided to use a script approach instead. In an effo ...

javascriptphpajax

Automated login feature in JQuery utilizing localStorage

I've been working on implementing an automatic login feature for users using the "Remember Me" functionality. Below is the code I have written, but unfortunately, it's not logging in users automatically: if (localStorage.getItem("username") != ...

javascriptc#jqueryasp.net-web-api

The new and improved Vue 3 computed feature in the Composition API

The temporary object appears as: tmp : { k1: { k2 : { k3 : [abc, def] } } To access k3 in the setup, it should be: tmp.value.k1.k2.k3[0 or 1]. I am looking to change its name to something like - k3_arr = tmp.value.k1.k2.k3; Within my Vue single componen ...

javascriptvue.jsvuejs3

Error encountered in VUE JS 3: The function vue.initDirectivesForSSR is not recognized as a valid function

I've been encountering some errors while trying to build my Vue web app with this configuration. I have searched for a solution, but couldn't find anyone facing the same issue as me. Any suggestions on how to resolve this problem? The build was s ...

javascriptnode.jsvue.jswebpack

Verify and include phone number entry using Jquery

My input field always requires a + sign to be the first character. HTML <input id="phone"> JS $("#phone").keydown(function (e) { $(this).get(0).value+="+"; // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [ ...

javascriptjqueryvalidationappend

Executing a function within a VueJs 2 component immediately after it has finished loading

How can I retrieve data after a component has finished loading? When I initialize my Vue instance and load the component, the template loads correctly but the functions in the mounted lifecycle hook are not executed, causing the stats object to remain empt ...

javascriptvue.jsvuejs2