Want text fading on an image, but it's not working, why?

  • Unknown's avatar
    matteofponti · Member · 
    <!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: ease 4s;
  background-color: #F1C40F;
}

.container:hover .overlay {
  opacity: 5;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Disperazione d'ape</h2>
<p>Sfiora le ali e ti dirò, esci dalla foto e la parola svanirà</p>


    
  Avatar
  
    
    
    Volavo
senza bisogno di senso.
Ora ricordi sempre più deboli
Miele, eri ed ora non sei più.
    
  </div>
</div>

</body>
</html>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, much of that cannot be used here at WordPress.com in posts or pages, and with anything less than the WordPress.com Business plan upgrade, you cannot edit the html of themes to add such.

  • Unknown's avatar
    sfmerv · Member ·

    Also in your css opacity is set from 0 to 1. ) being completely transparent and 1 being 100% opaque. right now you have

    .container:hover .overlay {
  opacity: 5;
}

    it should be 

    .container:hover .overlay {
  opacity: .5;
}

    if you want it to be 50% opaque.

    Not sure if that will help since you can not add it but I thought I should point it out.

  • Unknown's avatar
    thesacredpath · Member ·

    @dtlevin, good catch!

  • The topic ‘Want text fading on an image, but it's not working, why?’ is closed to new replies.