Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this?

Note: The layout should have 2 images, one at the top and another as a small book cover.

Check out this sample on StackBlitz

This is what I want to achieve:

https://i.sstatic.net/Ei78A.png

.html

<ion-card class="card-margin">
        <img class="contentPicture" [src]="data?.image" />
    
        <ion-card-content>
            <ion-item class="book-cover">
                <ion-thumbnail item-left class="thumbnail">
                    <img [src]="data?.image2">
                </ion-thumbnail>
            </ion-item>
            <ion-item class="book-details">
                <h2>From book:
                    <span>My book</span>
                </h2>
                <h2>Publisher:
                    <span>My publisher</span>
                </h2>
            </ion-item>
        </ion-card-content>
    </ion-card>
cssangulartypescriptsassionic3

Answer №1

To see my solution, click here.

To apply styles to the .book-cover class, use the following CSS:

.book-cover{
  top: -50px;
  z-index: 2;
  background: transparent;
}

Please be aware that you might need to adjust the image's alpha channel to eliminate any extra space within the image itself.

When working on the name section, it is recommended to utilize ion-row and ion-col instead of ion-item since the latter occupies the entire row.

<ion-card-content>
    <ion-grid>
      <ion-row>
            <ion-col col-2 class="book-cover">
                <ion-thumbnail item-left class="thumbnail">
                    <img [src]="data?.image2">
                </ion-thumbnail>
            </ion-col>
            <ion-col class="book-details">
                <h2>From book:
                    <span>My book</span>
                </h2>
                <h2>Publisher:
                    <span>My publisher</span>
                </h2>
            </ion-col>
      </ion-row>
    <ion-grid>
    </ion-card-content>

Answer №2

To create a layered effect, apply position: relative to the main image and position: absolute to the book image using the following sample code:

.bg-image {
  position: relative;
  
}
.book {
  position: absolute;
  top: 250px;
}
.text {
  position: absolute;
  left: 180px;
  
}
<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>

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

An error occurred while trying to load the image due to an unexpected character appearing at the beginning of the JSON

Currently, I am facing an issue with storing an image in MongoDB and then displaying it back in Angular. Uploading the image is successful, however, I encounter an error when attempting to display it. The API, which works perfectly fine when tested in POST ...

node.jsangularmongodbexpressmean

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

cssasp.net

Error in Svelte/Typescript: Encounter of an "unexpected token" while declaring a type

Having a Svelte application with TypeScript enabled, I encountered an issue while trying to run it: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src\api.ts (4:7) 2: 3: export default class API { 4: ...

node.jstypescriptnpmsvelte

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

What is the meaning of '=>' in typescript/javascript?

I keep coming across lots of '=>' in the code I found on the internet. Could someone please explain it to me as if I were 5 years old? (I'm searching for the specific code, and I'll share it here once I locate it).. Found it: ...

javascripttypescript

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...

javascriptangulartypescript

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

Properly implement Angular/Typescript to populate an array with chosen objects

Currently, I have an Angular application that is fetching JSON resources from a Spring Boot REST API. These resources consist of simple player objects with attributes like id, name, position, and value. On the UI, each object is displayed along with a "BUY ...

angulartypescript

Encountered difficulty locating the module path 'stream/promises'

When importing the following in a typescript nodejs app import { pipeline } from "stream/promises"; Visual Studio Code (vscode) / eslint is showing an error message Unable to resolve path to module 'stream/promises' This issue appeare ...

javascripttypescriptvisual-studio-codeimporteslint

Guide to creating a dynamically filled dropdown menu with Angular 6 HTML

An array of employees is assigned tests by Lead. When assigning tests, the selected employee is properly assigned. When populating back, Lead can see which test is assigned to which employee. The issue I am facing is that EmployeeID is populated correctly ...

htmlangular

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

List the attributes that have different values

One of the functions I currently have incorporates lodash to compare two objects and determine if they are identical. private checkForChanges(): boolean { if (_.isEqual(this.definitionDetails, this.originalDetails) === true) { return false; ...

javascriptangulartypescriptlodash

Navigating through the Angular Upgrade Roadmap: Transitioning from 5.0 to 6

As per the instructions found in this helpful guide, I executed rxjs-5-to-6-migrate -p src/tsconfig.app.json. However, an error is appearing. All previous steps were completed successfully without any issues. Any suggestions on how to resolve this? Please ...

angulartypescriptrxjsangular5angular6

What are the steps to personalize Twitter Bootstrap with Less for changing the height of the Navbar?

I recently stumbled upon some interesting articles that explain how to customize various elements of Twitter Bootstrap using LESS. You can check out one of the articles here and find more information about Twitter Bootstrap here. However, I am still unsure ...

csstwitter-bootstrapless

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

I am experiencing an issue where the pseudo element ::after is not appearing in my browser. I am currently working with React.js and Material UI's makeStyles. Here is the code snippet causing the problem: modalTitle: { borderBottom: '2px sol ...

javascriptcssreactjsmaterial-uijsx

Server.js experiencing issues with body-parser causing backend to fail loading in browser

Having an issue with my backend server not loading in the browser. It runs fine in terminal, but I can't seem to figure out why it's not working in the browser. I'm new to backend programming and I recently added an app.post method which see ...

node.jsangularexpress

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Working on my first HTML/CSS project, I encountered a browser compatibility challenge. The code functions well in Firefox, IE, and Edge but fails in Chrome. Specifically, I am trying to make a button display alternating up and down arrows when clicked. Whi ...

javascripthtmlcsscross-browser

Bootstrap creates a small and calculated width for elements

Currently, I am integrating the react-datepicker plugin into my project alongside Bootstrap 3. Upon implementation, I have noticed that the size of the datepicker on my website appears to be smaller than the examples provided in the plugin demos. It seems ...

csstwitter-bootstraptwitter-bootstrap-3react-datepicker

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

javascriptjquerycss

Disabling animations in Reactjs with CSSTransition and Group Transition

Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are ...

javascriptcssreactjsreact-transition-group