0

I have this code

<div class="photo">
<img src="images.jpg">
<div class="text">Its transparent</div>
</div>

I have tried this css

.text{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

also this

.text{
    background: rgba(0, 0, 0, 0.28) none repeat scroll 0 0;
    color: #fff;
    position: relative;
    top: -240px;
    width:100%;
    height:100%
}

I want to the text above in images(not a background) with transparent background. I does have a transparent but it doesnt cover the whole images. I have tried this but doesnt apply to me.

Allow a div to cover the whole page instead of the area within the container

Background images: how to fill whole div if image is small and vice versa

Have a background image with a transparent colour

Community
  • 1
  • 1
Pure Rhymer Organization
  • 526
  • 4
  • 20

1 Answers1

1

You could set .photo { position: relative; } then use position: absolute; to .text

div.photo .text {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Try on: https://jsfiddle.net/mmouze3n/1/

Edit 1 -

Adding a blur overlay by :before

div.photo .text {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-align: center;
  font-size: 26px;
  color: #fff;
  z-index: 1;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover .text { font-size: 100px; color: #000; }

div.photo:before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color:#ccc;
  opacity: 0;
  z-index: 0;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover:before {
  opacity:0.8;
}

JSFiddle: https://jsfiddle.net/mmouze3n/2/

Zay Lau
  • 1,856
  • 1
  • 10
  • 17