How to put text in content property into the midle of an image

Question

I made an image on which some text apears when I hover the mose over it. I need to move the text in the middle of the image, but I can't find out how.

This is my code:

.home{
    background-image: url("https://www.cvikovacek.cz/wp-content/uploads/2017/08/domecek-270x300.png");
    height: 300px;
    width: 300px;
    background-size: cover;
    font-size: 30px;
    text-align: center;
}
.home:hover{
    background: black;
}
.home:hover::after{
    content: "HOME";
    color: green;
}

<body>
    <div class="home"></div>
</body>

Thanks for any answer.

score 1 · Answer 1 · answered Aug 14 '21 at 15:18

1

You can use flex and align it with the justify-content and align-items properties.

.home {
  background-image: url("https://www.cvikovacek.cz/wp-content/uploads/2017/08/domecek-270x300.png");
  height: 300px;
  width: 300px;
  background-size: cover;
  font-size: 30px;
  text-align: center;
}

.home:hover {
  background: black;
}

.home:hover::after {
  content: "HOME";
  color: green;
  /* Changes */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<body>
  <div class="home"></div>
</body>

answered Aug 14 '21 at 15:18

Parco

602
5
12

Happy to help, I'd suggest you check more about `flexbox` it's really powerful if you want your content to align and adapt automatically – Parco Aug 14 '21 at 15:27
Ok, thanks, I'll have a look at it. – IAmStillLearning Aug 14 '21 at 15:31

How to put text in content property into the midle of an image

1 Answers1