'fitting a p tag under an input tag

I have an input button to upload images but I wanted to style it a certain way and because the input tag doesn't offer that many styling options I decided to go with having a parent div that includes a p tag and an input tag but with the p tag under the input with the input being transparent. That way the whole parent div being clicked will trigger the file upload but I'm having trouble fitting and centering the p tag under the input tag. How can I make the p tag visible but under the input tag and also centered? Also, when hovered the background of the main div changes so the p tags color needs to change to white but it is under so how can I make that visible when changing the text color to white. Any help is appreciated. Thanks in advance.

.items {
  position: relative;
  width: 50%;
  height: 70%;
  border-radius: 8px;
  border: 1px solid #000000;
  margin: auto;
}

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
}

.items:hover p {
  color: #ffffff;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.items p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: -1;
}
<div class="items">
  <input type="file" title="" id="image_input" accept="image/png, image/jpg">
  <p>Add pictures</p>
</div>
htmlcss


Solution 1:[1]

this isn't the best way, but is this the desired output?

.items {
  position:relative;
  width: 50%;
  height: 70%;
  border-radius: 8px;
  border: 1px solid #000000;
  margin: auto;
}

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
}

.items:hover p {
  color: #ffffff;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.items p {
  
  position:absolute;
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: -1;
  top:25px;
  left:45%;
}
<div class="items">
  <input type="file" title="" id="image_input" accept="image/png, image/jpg"><br>
  <p>Add pictures</p>
</div>

Solution 2:[2]

place the p tag below the div and make some minor changes to your css

.items {
  
  width: 50%;
  height: 70%;
  border-radius: 8px;
  
  margin: auto;
}

input{
   border 1px solid red;
   }

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
}

p:hover {
  color: blue;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

p {
  
 
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  text-align:center;
  width: 100%;
  height: 100%;
  z-index: -1;
  top:25px;
  left:45%;
}
<div class="items">
  <input type="file" title="" id="image_input" accept="image/png, image/jpg"><br>
  <p>Add pictures</p>

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DCR
Solution 2

Related Questions