CODEWITHSUNDEEP
csshoveroverlay
Andy G
Andy G

Reputation: 19

keeping text on an image while making hover effect css

I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do? Didn't find answer. I want text being there all the time with and without hovering. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

    .photo-text.one {
        background-size: cover;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
        height: 409px;
        position: relative;
        width: 576px;
    }

    .img-overlay{
        width: 100%;
        height: 100%;
        background: #6fc3df;
        opacity: 0.75;
    }

    .photo-text.one:hover:after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
    }

    .text {
        position: absolute;
        top: 100px;
        left: 150px;
        color: red;
    }
</style>
</head>
<body>
<div class="photo-text one">
    <div class="img-overlay">
    </div>
    <h2 class="text">fffff</h2>
</div>
</body>
</html>

Upvotes: 0

Views: 79

Answers (1)

sol
sol

Reputation: 22939

Add the z-index property to your text.

Information here

.photo-text.one {
  background-size: cover;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
  height: 409px;
  position: relative;
  width: 576px;
}

.img-overlay {
  width: 100%;
  height: 100%;
  background: #6fc3df;
  opacity: 0.75;
}

.photo-text.one:hover:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}

.text {
  position: absolute;
  top: 100px;
  left: 150px;
  color: red;
  z-index: 1;
}
<div class="photo-text one">
  <div class="img-overlay">
  </div>
  <h2 class="text">fffff</h2>
</div>

Upvotes: 1

Related Questions