Pure Rhymer Organization Pure Rhymer Organization - 2 months ago 8
CSS Question

Have a transparent when hover each images(not background)

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

Answer

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/

Comments