Slide images inside a larger PNG image

Asked

Viewed 38 times

1

inserir a descrição da imagem aqui

This is the static PNG image, in the background of it I wish I had a slide of images that were visible only inside the cell phone

HTML:

  <div class="device-combo device-combo-macbook-iphonex mb-6 mb-md-0">
    <div class="device device-iphonex">
      <img src="assets/images/body/imagem1.png" class="device-screen" alt="...">
      <img src="assets/images/body/fundoEstatico.png" class="img-fluid" alt="...">
    </div>
  </div>

CSS:

.device, .device>.img-fluid {
    position: relative;
 }
.device:before {
    content: "";
    background-color: #f9fbfd;
}
.device-screen, .device:before {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
}
.device-iphonex:before, .device-iphonex>.device-screen {
    top: 7.784431138%;
    left: 16.4021164%;
    width: 66.137566137%;
    height: 80.838323353%}
.device-macbook:before, .device-macbook>.device-screen {
    top: 11.53846154%;
    left: 13.38709677%;
    width: 73.548387096%;
    height: 73.076923076%}
.device-combo {
    position: relative;
}
.device-combo>.device {
    position: absolute;
}
.device-combo-iphonex-iphonex {
    padding-bottom: 130.250482%}
.device-combo-iphonex-iphonex>.device-iphonex:first-child {
    bottom: 0;
    left: 0;
    width: 65.5260116%;
    z-index: 1;
}
.device-combo-iphonex-iphonex>.device-iphonex:last-child {
    top: 0;
    right: 0;
    width: 72.8323699%}
.device-combo-iphonex-macbook, .device-combo-macbook-iphonex {
    padding-bottom: 62.4260355%}
.device-combo-iphonex-macbook>.device-macbook, .device-combo-macbook-iphonex>.device-macbook {
    width: 91.7159763%}
.device-combo-iphonex-macbook>.device-iphonex, .device-combo-macbook-iphonex>.device-iphonex {
    width: 27.9585799%;
    z-index: 1;
}
.device-combo-macbook-iphonex>.device-macbook {
    top: 0;
    left: 0;
}
.device-combo-iphonex-macbook>.device-macbook {
    top: 0;
    right: 0;
}
.device-combo-macbook-iphonex>.device-iphonex {
    bottom: 0;
    right: 0;
}
.device-combo-iphonex-macbook>.device-iphonex {
    bottom: 0;
    left: 0;
}
javascript html5 css3

  • If the white area inside the cell phone is transparent, isn’t it enough to apply z-index to organize your images in layers? Have you tried something like this?

  • 1

    I tried with z-index, as I showed in the code, but still I did not have result

  • I can leave the image I want behind the larger one, but when I will perform the click action, what is selected is the larger

1 answer

2


Here’s a model to help you.

First vc makes a flex container with position relative, puts position absolute in the children and aligns the two in the center of the container with align-itens and justify-content. Then in the image above you use user-select: none and pointer-event:none.

inserir a descrição da imagem aqui

In this model the image is over a div and inside this div has a clickable button as you can see and test.

.box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 572px;
}
.box img,
.box div {
    position: absolute;
}
.box div {
    height: 550px;
    width: 268px;
    background-color: rgba(255,0,0, 0.5);
    border-radius: 25px;
    transform: translateX(-10px);
}
.box img {
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}
<div class="box">
    <div class="slide">
        <button style="width: 200px; height: 100px;">button</button>
    </div>
    <img src="https://i.imgur.com/Ut14H58.png">
</div>

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.