Highlighted

Web design, click overlay

New Here ,
Dec 22, 2019

Copy link to clipboard

Copied

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. 

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>

 

Topics

Desktop, How to, Other, Product issue

Views

446

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Web design, click overlay

New Here ,
Dec 22, 2019

Copy link to clipboard

Copied

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. 

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>

 

Topics

Desktop, How to, Other, Product issue

Views

447

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 22, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Apr 09, 2020

Copy link to clipboard

Copied

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>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...