Highlighted

How do you layer images together

New Here ,
Sep 29, 2017

Copy link to clipboard

Copied

How do you layer multiple images together.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Generally, I would do that in Photoshop, then bring the composite image over to DW as a PNG (if some transparency is necessary).

In Dreamweaver, you would use the CSS property position:absolute, then drag your images to where you want them in the Design View window, or set top and left settings in the css. However, unless you're very familiar with how to make it work correctly, you'll end up with a mess, especially on small screens.

Views

265

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

How do you layer images together

New Here ,
Sep 29, 2017

Copy link to clipboard

Copied

How do you layer multiple images together.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Generally, I would do that in Photoshop, then bring the composite image over to DW as a PNG (if some transparency is necessary).

In Dreamweaver, you would use the CSS property position:absolute, then drag your images to where you want them in the Design View window, or set top and left settings in the css. However, unless you're very familiar with how to make it work correctly, you'll end up with a mess, especially on small screens.

Views

266

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
Sep 29, 2017 0
Adobe Community Professional ,
Sep 29, 2017

Copy link to clipboard

Copied

Generally, I would do that in Photoshop, then bring the composite image over to DW as a PNG (if some transparency is necessary).

In Dreamweaver, you would use the CSS property position:absolute, then drag your images to where you want them in the Design View window, or set top and left settings in the css. However, unless you're very familiar with how to make it work correctly, you'll end up with a mess, especially on small screens.

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...
Sep 29, 2017 1
New Here ,
Sep 29, 2017

Copy link to clipboard

Copied

Then will I be able to isolate certain layers for links and rollover effects?

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...
Sep 29, 2017 0
Adobe Community Professional ,
Sep 29, 2017

Copy link to clipboard

Copied

With a composite image, you could use a responsive image map javascript (there are a bunch available online). Standard image maps won't scale with the image in responsive sites. The coordinates for the hot spots are fixed, so if the image shrinks/grows, they won't be in the correct positions anymore.

Adding rollovers to multiple images that are stacked using the position:absolute method has its own issues, but would generally be easier, especially if you're not familiar with the script you'd be using on a composite image. The trickier part of using stacked images would be in getting them to be responsive so they don't fall apart on mobile devices.

It ultimately depends on the code you come up with though.

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...
Sep 29, 2017 1
Adobe Community Professional ,
Sep 29, 2017

Copy link to clipboard

Copied

Rollover effects can be performed easily on single images with CSS.   You can even change the image's color, hue or saturation with CSS filters for some interesting effects.  See CSS3 filter Property

For a working example with the Grayscale filter.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>CSS Rollover Effects</title>

<style>

img {max-width: 100%;}

.rollover {

opacity: 0.8;

filter: grayscale(100%);

border: 5px solid #FFF;

transition: all 0.5s ease;

}

.rollover:hover,

.rollover:active,

.rollover:focus {

opacity: 1.0;

border-color: #15A3C0;

filter:none}

</style>

</head>

<body>

<a href="#"><img class="rollover" src="https://placeimg.com/300/200/arch" alt="placeholder"></a>

 

<a href="#"><img class="rollover" src="https://placeimg.com/300/200/tech" alt="placeholder"></a>

 

<a href="#"><img class="rollover" src="https://placeimg.com/300/200/people" alt="placeholder"></a>

 

<a href="#"><img class="rollover" src="https://placeimg.com/300/200/animals" alt="placeholder"></a>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Sep 29, 2017 1
pziecina LATEST
LEGEND ,
Sep 29, 2017

Copy link to clipboard

Copied

Just to add to your reply Nancy,

One could also use css animations, to rotate layered images, and have a lightbox apply when an image is selected, (also pausing the image rotation). Sort of like a slideshow but with the images on top of each other.

Unfortunatly this is not for a beginner, and as the OP is !!!

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...
Sep 29, 2017 1
Adobe Community Professional ,
Sep 29, 2017

Copy link to clipboard

Copied

Layering images on the web is not a good practice.  As Jon said, make your layered image in Photoshop and then use File > Export > ExportAs > JPG or PNG with transparency.   Make sure to lower the quality slider to reduce file size and save bandwidth.  See screenshot.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Sep 29, 2017 1