How do you layer images together

Report · Sep 29, 2017

How do you layer multiple images together.

Report · Sep 29, 2017

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.

Report · Sep 29, 2017

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

Report · Sep 29, 2017

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.

Report · Sep 29, 2017

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>

<head>

<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>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 29, 2017

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 !!!

Report · Sep 29, 2017

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

How do you layer images together

1 Correct answer