Question

I want to create an image gallery and if the user hovers over an image it should be set to none and the text below it should be shown. But I have to set the image like this

echo "<div class=textimage style=background-image:url(pictures/head_censored.png)>Sample text</div>";

Like this, the picture it shown but the hover effect (background-image: none) is not applied. If i declare the image in the css file it works but as the pictures are always changing this is way too complicated. Any ideas?

Answer 1

If you want to create something simple without making complicated javascript, a little css trick will do.

<div class='disappear'>
  <p class='text'>This image is about stuff 1</p>
  <img src='pictures/nicepeople.jpg' />
</div>
<div class='disappear'>
  <p class='text'>This image is about stuff 2</p>
  <img src='pictures/nicepeople.jpg' />
</div>
<div class='disappear'>
      <p class='text'>This image is about stuff 3</p>
      <img src='pictures/nicepeople.jpg' />
    </div>
<style type='text/css'>
 div.disappear p{
   display:none; 
 }
 div.disappear:hover p{
   display:block; 
 }
 div.disappear:hover img{
   display:none; 
 }
</style>

Wish you luck 🙂