Наложения изображения друг на друга css

Как наложить картинку на картинку в html

Для наложения картинки на картинку в HTML можно использовать абсолютное позиционирование. Для этого необходимо создать контейнер, который будет содержать обе картинки, и применить к этому контейнеру относительное позиционирование. Затем, для каждой картинки нужно задать абсолютное позиционирование и указать координаты ее расположения относительно родительского контейнера. Например:

 class="container">  src="image1.jpg" class="image image1" />  src="image2.jpg" class="image image2" />  

.container  position: relative; > .image  width: 300px; height: 200px; > .image1  position: absolute; top: 0; left: 0; > .image2  position: absolute; top: 0; left: 0; > 

В данном примере изображения с размерами 300×200 будут распологаться одна над другой.

Источник

How to Overlay Images with CSS

Overlays can be a great addition to the image and create an attractive website. In this snippet, we’ll show different ways of using overlays in CSS.

A common method is to use a colored overlay over a linked image. First, we’re going to demonstrate an example where we slightly darken the image. Let’s start with creating HTML.

Create HTML

h1>Example h1> h2>Original image h2> div class="image"> div> h2>Overlay image h2> div class="image"> div class="overlay"> div> div>

Add CSS

• Set the width, height, and background-color for the “overlay” class.
• Specify the background-image and other background properties for the «image» class.

h1 < text-align: center; > .overlay < width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); > .image < width: 500px; height: 330px; margin-bottom: 20px; background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center; background-size: cover; background-repeat: no-repeat; >

Now, you can see the full example.

Example of overlaying an image:

html> html> head> title>Title of the document title> style> h1 < text-align: center; > .overlay < width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); > .image < width: 500px; height: 330px; margin-bottom: 20px; background-image: url('https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center; background-size: cover; background-repeat: no-repeat; > style> head> body> h1>Example h1> h2>Original image h2> div class="image"> div> h2>Overlay image h2> div class="image"> div class="overlay"> div> div> body> html>

Result

We can also add hover effects to the linked images. Color overlays are the most common effect that can be added to the website and create hover effects. Let’s see some examples and learn how to create an overlay effect on the image on hover.

Example of overlaying an image on hover:

html> html> head> style> .container < position: relative; width: 50%; > .image < display: block; width: 100%; height: auto; > .overlay < position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .7s ease; background-color: #339c57; > .container:hover .overlay < opacity: 1; > .text < color: white; font-size: 18px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="overlay"> div class="text">Travel div> div> div> body> html>

Example of overlaying an image on hover with a fading effect:

html> html> head> title>Title of the document title> style> .container < position: relative; width: 50%; > .image < opacity: 1; display: block; width: 100%; height: auto; transition: .7s ease; backface-visibility: hidden; > .middle < transition: .7s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; > .container:hover .image < opacity: 0.4; > .container:hover .middle < opacity: 1; > .text < background-color: #009c36; color: white; font-size: 18px; padding: 14px 28px; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="middle"> div class="text">Travel div> div> div> body> html>

Example of overlaying an image title:

html> html> head> title>Title of the document title> style> * < box-sizing: border-box; > .container < position: relative; width: 50%; max-width: 300px; > .image < display: block; width: 100%; height: auto; > .overlay < position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; transition: .7s ease; opacity: 0; color: white; font-size: 20px; padding: 20px; text-align: center; > .container:hover .overlay < opacity: 1; > style> head> body> div class="container"> img src="https://images.unsplash.com/photo-1583528306385-8f29f27cb2d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="image"> div class="overlay">Travelling div> div> body> html>

In our last example, we create the effect of an image overlay using two images, one of them overlaying the other. Our second image will appear at the bottom right corner of the first image when hovering.

Example of overlaying an image with another image:

html> html> head> title>Title of the document title> style> .gallerypic < width: 500px; text-decoration: none; position: relative; display: block; border: 1px solid #666; padding: 3px; margin-right: 5px; float: left; > .gallerypic span.zoom-icon < visibility: hidden; position: absolute; right: 0; bottom: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.6; > a.gallerypic:hover span.zoom-icon < visibility: visible; > style> head> body> a href="#" class="gallerypic"> img src="https://images.unsplash.com/photo-1492136344046-866c85e0bf04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Gallery Photo" class="pic" /> span class="zoom-icon"> img src="https://images.unsplash.com/photo-1505205296326-2178af1b47bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="200" height="150" alt="Zoom"> span> a> body> html>

Источник