CODEWITHSUNDEEP
ionic2
Farrukh Qamar
Farrukh Qamar

Reputation: 93

Display title over image in ionic2Slides

How to add text over the image in ionic1 slides

i need to display the text over image in the ionic slide. what should be stylesheet value for the text i need to set? here is title property.

.slide-title {
    margin-top: 2.8rem;

  }

and here is the image property

.slide-image {
    max-height: 100%;
    max-width: 100%;
    margin: 18px 0;
  }

and here is the code for displaying slides

<ion-slides pager>
    <ion-slide *ngFor="let slide of slides">
      <ion-toolbar>
        <ion-buttons end>
          <button ion-button color="primary">Skip</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image" width="100%" height="100%"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
    <ion-slide>
      <ion-toolbar>
      </ion-toolbar>
      <img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
      <h2 class="slide-title">Ready to Play?</h2>
      <button ion-button large clear icon-right color="primary">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
</ion-content>

Upvotes: 1

Views: 1392

Answers (1)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

2 ways to do this:

  1. Setting the image as background-url to the outermost container. And then specify the title and other things in this container.

  2. Outermost container will have position: relative. Have your image <img/> inside this container. All other inner containers (title and etc), will have position: absolute; and then actual position accordingly. Like top: 5%; left: 5%;

I have tried both the solutions in my app in the past. Both works. Not tried with your code though. Let me know about specifics if you need.

Upvotes: 2

Related Questions