A_Mac A_Mac - 4 months ago 9
CSS Question

List of hyperlinks hidden below image

Essentially I'm trying to get an image to disappear and reveal a list of hyperlinks. I thought I had everything sorted until I realised, that my top image never actually disappears, so none of my hyperlinks are clickable.



.container {
position: relative;
width: 400px;
height: 400px;
}

#textdiv_violet {
position: absolute;
top: 160px;
left: 64px;
width: 200px;
height: 200px;
}

#textdiv_violet img {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}

#textdiv_violet img:hover {
opacity: .1;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}

<div class="container">
<div id="textdiv_violet">
<ul>
<li><a href="http://www.google.com">I will be violet links</a></li>
<li><a href="http://www.google.com">Me too</a></li>
<li><a href="http://www.google.com">And me</a></li>
</ul>
<img src="myimage.jpg" alt="">
</div>
</div>





I tried adding
display: none
to my CSS, but this caused the image to kind of flicker, as the mouse was moved around the area, rather than just disappearing as I had hoped. Hoping for a CSS or HTML solution if possible. Also, this set-up is being designed to work almost exclusively on IE8. If relevant, this code is replicated in 5 other areas around the page.

Please post your answers as if you were speaking to a labrador? I don't code, I've just been given a task that I'm trying to achieve, and whilst ideally I should teach myself CSS and/or HTML, unfortunately I haven't been given the time to do so. Also, apologies if the code looks clumsy, I've pieced it together from basics/forums/tutorials/trial & error!

Answer

@SimianAngel's answer is good work ! but maybe you wanna play with z-index property ! It can prevent image's opacity to 0 and remain watermark effect

just modify your css:

     .container { 
        position: relative; 
        width: 400px; 
        height: 400px;
     }

     #textdiv_violet{ 
         position: absolute; 
         top: 160px; 
         left: 64px;
         width: 200px; 
         height: 200px;
     }

     #textdiv_violet:hover img{ 
        opacity: .1; 
        z-index:2;
        transition: z-index .4s ease-out ,  opacity .4s ease-out; 
     }

     #textdiv_violet ul {
        position: relative; 
        z-index: 4
     }

     #textdiv_violet img { 
        position: absolute; 
        top: 0px; 
        left: 0px; 
        width: 200px;
        height: 200px; 
        z-index: 6;
     }

here's a demo: https://codepen.io/Carr1005/pen/jAxBzE