How can I put an image/text/gif on top of an already existing gif?

Question

I have added two gifs in my code and I am trying to add text on top of it, but it ends up being on top or the bottom of the gif. How can I add something on top of a gif?

I've tried adding text and positioning it on top of the gif using relative position and absolute but that does'nt work.

HTML:

<! DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <link href="taniaWebsite11.css" type="text/css" rel="stylesheet">
<title> </title>

</head>
<body class="mainpage12">
<center>


<img src="giphy1.gif">
<img src="1.gif">

 </center>
</body>

</html>

CSS:

img{
height:1000px;
width:1000px;
 }

body.mainpage12{
background-color:black;
}

Hi, could you please create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) ? — Cesar Correchel, Jan 08 '19 at 16:49

score 1 · Answer 1 · answered Jan 08 '19 at 16:50

You can not get your desired behavior with this HTML structure, so I show you my solution:

.outer-1 {
  position: relative;
  width: 100px;
  height: 100px;
}

.outer-1 > img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0px;
  top: 0px;
}


.outer-1 > p {
  position: relative;
  z-index: 2;
}

<! DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <link href="taniaWebsite11.css" type="text/css" rel="stylesheet">
<title> </title>

</head>
<body class="mainpage12">
<center>
  <div class="outer-1">
    <img class="img" src="https://i.ibb.co/bL5NCq2/tenor.gif" alt="tenor" border="0">
    <p>text text text, pls upvote me</p>
  </div>
  <div class="outer-1">
    <img class="img" src="https://i.ibb.co/bL5NCq2/tenor.gif" alt="tenor" border="0">
    <p>text text text, pls upvote me</p>
  </div>
 </center>
</body>

</html>

How can I put an image/text/gif on top of an already existing gif?

1 Answers1