Web design, click overlay

Report · Dec 22, 2019

Hi, I am designing my webiste and am an illustrator, I want the home page to be a single image and with evey click a new image that overlays. Does anyone know how I could make this work.

Report · Dec 22, 2019

Do you want to make this as a prototype in Xd?

Design this on several artboards and then link them.

Or do you want to know how to actually make this work on the web?

Report · Apr 09, 2020

You can use that css to make overlay design just take a look:

Transparent Image Overlay –

The following CSS code shows how to transparent color overlay on images. Also, you can see how to overlay one div over another div.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	.flower{
		width:320px;
		height:240px;
		background: url(img/tulip.jpg) no-repeat;
	}
	.flower .color{
		position:relative;
		top:0px;
		width:320px;
		height:240px;
		background:#fff;
		opacity:0;
	}
	.flower:hover .color
	{
		opacity:0.7;
	}
</style>
</head>
<body>

White Overlay Image –

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	.flower{
		width:320px;
		height:240px;
		background: url(img/tulip.jpg) no-repeat;
	}
	.flower:hover{
		width:320px;
		height:240px;
		background:#fff;
		opacity:0.9;
	}
</style>
</head>
<body>

Adobe Community

Web design, click overlay

1 Correct answer