Creating a visually engaging design by overlaying images in Bootstrap 4

Currently, I'm in the process of developing a website using Bootstrap 4. One particular section on the page features an image of someone holding an iPad. The screen of the iPad is transparent, and my intention is to either insert an image or a video within that space.

Although I'm not well-versed in CSS, I am wondering if it's possible to position the image behind the tablet by utilizing z-index?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-md-12">
        <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" width="35%" class="mx-auto d-block">
        <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" width="60%" class="mx-auto d-block">
    </div>
</div>

htmlcssbootstrap-4

Answer №1

Indeed, achieving this effect is possible by adjusting the positioning of your elements. In this case, there is no need to use the z-index property since the elements are already in the correct order. It's important to ensure that the image fits within the tablet's frame, which is not currently the case.

Below is a functional example:

#wallpaper,
#tablet {
  position: absolute;
}

#wallpaper {
  width: 200px;
  top: 70px;
  left: 110px;
}

#tablet {
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" class="mx-auto d-block">
    <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" class="mx-auto d-block">
  </div>
</div>

Answer №2

To achieve the desired outcome, it is essential to experiment with the responsiveness of the design. Here is a potential approach:

.tabletWrapper {
  position:relative;
  margin:0 auto;
  width:600px;
}

#wallpaper, #tablet {
  position:absolute;
}

#tablet {
  left:0;
  right:0;
  width:65%;
}

#wallpaper {
  left:0; 
  right:11px;
  width:33%;
  top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
  <div class="tabletWrapper">
    <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" class="mx-auto d-block">
    <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" class="mx-auto d-block">
  </div>
  </div>
</div>

Answer №3

Check out this Fiddle that provides a tutorial on stacking images using z-index.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

adjusting the size of buttons depending on the quantity of items displayed

Currently in my Angular application, I am working on rendering buttons within the view using the *ngFor directive. My goal is to have the rendered buttons appear side by side. While I have achieved this, I now want to dynamically resize each button based o ...

javascripthtmlcss

Display text dynamically on the canvas as soon as input is received

My goal is to allow the user to enter text outside of a canvas element and see it displayed on the canvas either in real-time or when a button is clicked. I have limited experience with canvas and JavaScript, so any guidance would be appreciated. Thanks ...

javascriptcsshtmlcanvas

Automatically add a class to the current list item in jQuery and remove the class from the

Here is my HTML code, where I am looking to dynamically swap the classes between two li elements every 2 seconds using jQuery. <li class=""> <a href="#"> <img src="client_logo01.png"> </a> </li> <li class= ...

javascriptjqueryhtmlcss

Having trouble positioning the content within the div

I'm currently working on an application using Vue.js and Bootstrap, and I'm trying to create a folder layout that looks like this: https://i.sstatic.net/PFZYo.png Unfortunately, I'm having trouble aligning the content to match the image ab ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Safari IOS experiencing issue with element disappearing unexpectedly when input is focused

I am facing a situation similar to the one discussed in the question (iOS 8.3 fixed HTML element disappears on input focus), but my problem differs slightly. My chatbox iframe is embedded within a scrollable parent, and when the iframe is activated, it exp ...

javascriptioscssmobile-safari

Conceal the page's content as it moves beneath a stationary div

My issue involves a fixed div position with a margin from the top of the page. When I scroll my page, the content of my relatively positioned div (containing page content) is visible under the fixed div due to the margin from the top of the page. Despite s ...

htmlcss

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Check out the fiddle I created for my query https://jsfiddle.net/e7te8hf1/ <section id="action-bar"> <div id="logo"> <a href="#"><img src="img/logo.png"></a> </div><!-- end logo --> <nav class="navbar navigat ...

javascripthtmlcssflip

Basic HTML code that displays either one or two columns based on the width of the screen

My monitoring website displays dynamic rrd graphs in png format with fixed dimensions. I am looking to adjust the layout based on browser window size - showing the graphs in 1 column if the width is below a certain threshold, and in 2 columns if it exceed ...

javascripthtmlcss

Problem occurring with Bulma CDN version 0.8.0 failing to identify the spacing helper

Recently revisited an older project I had started some time ago using the Bulma framework. However, for some reason, the 0.8.0 CDN is not being imported or recognized correctly by the spacing classes. Here's the code snippet I had initially: <link ...

htmlcsscdnbulma

What is the best way to align the navigation list to the right in Bootstrap v4alpha6?

Recently, I discovered that with the alpha 6 version of bootstrap 4, they have made some changes to utilize flexbox which has caused some issues in my existing code from alpha 5. After checking out this fiddle, I attempted to use the flex justify content c ...

csstwitter-bootstrap

Move the button to the following line and center it. Ensure that the background image remains at full size

.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-text{ fon ...

htmlcsstwitter-bootstrap

Select an item by populating it with JQuery

Here is the select HTML code I am working with: <div class="form-group col-lg-6 row"> {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' =&g ...

phpjqueryhtmllaravel

Maintain the hover functionality for touchscreens

Currently, I am developing a website with a feed of images using Instafeed.js. The process of pulling the images, likes, and comments is functioning smoothly. I have implemented a hover effect that displays the number of likes and comments on an image. Yo ...

htmlcsshovertouch

Navigating to DIV position while rendering JSP

Is it possible to make the browser automatically scroll to a specific DIV location when loading a JSP page? The DIV could be placed anywhere on the page and has a unique identifier. I am aware that this can be achieved using Javascript/jQuery, but I speci ...

javascriptjqueryhtmljspdom

What are the steps to executing commands with child processes in Node.js?

I have successfully established communication between the client and server using socket.io. I am now utilizing WebSockets to send commands from the client to the server, and I would like to execute these received commands on the server. Here is my approa ...

javascripthtmlnode.jsexpresswebsocket

The ng-repeat directive adds an additional line after each iteration of the list item

Whenever the angular directive ng-repeat is utilized with an <li> element, I notice an additional line appearing after each <li>. To demonstrate this issue, see the simple example below along with corresponding images. Here is a basic example ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...

javascripthtml

What are the steps to incorporating HTML code into JavaScript?

Can I insert HTML elements into the view using JavaScript? I am hoping to achieve something like this: <script> <% for @m in @messages %> <h1>i</h1> <% end %> </script> I need it to work seamlessly with Ruby. Not s ...

javascripthtmlruby

Partial display of Datetimepicker options puzzling users

I'm having some trouble getting the datetimepicker to work. I followed the installation instructions which can be found here. After installing the package with bower and linking all the necessary stylesheets and js files, I encountered an issue where ...

phplaravelbootstrap-4datetimepickerbootstrap-datetimepicker

Choose a specific field from a Django filter option

Just had a quick query: Is there a way for me to choose only one field from my filter form in Django? At the moment, I'm showcasing the entire form: <div class="container"> <form method="GET" > {{ filter.form.Precio|crispy }} ...

pythonhtmldjangopython-3.x