How to add image and change visibility on hover CSS


Tags: html,css,hover,visibility,opacity

Problem :

I'm trying to do something semi complicated. I have 4 linked images. when I hover over the image I want the opacity to change to 0.7. I also want a ribbon to become visible when you hover that image. Here's the code I'm using

<div id="tracks-content">
    <div class="track enrolled">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track1.png" /></span></a>
       <h3>Track title 1</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
    </div>
    <div class="track unavailable">
       <a href=""><div class="ribbon"><img src="ribbon.png"/></div>
       <span><img src="images/pic-track2.png" /></span></a>
       <h3>Track title 2</h3>
       <span>Track description here. Lorem ipsum dolor sit amet con sectetuer adipiscing elit.</span>
   </div>
</div>

So if I hover over the image for say track1.png then I want track1.png to dim to 70% and I want the visibility for ribbon.png to change from hidden to visible. I keep running into a problem where the opacity of the image is also applied to the ribbon. In the image you can see when I hover the 1st image the ribbon appears but is also getting the opacity. see link for image http://img.photobucket.com/albums/v513/Tearyguitarist/example.png

Here's the css i'm using

#tracks-content .enrolled a:hover > .ribbon{
    visiblity:visible;
}
#tracks-content .enrolled a:hover span img{
    outline: solid 1px #40a304;
    opacity:0.5;
}

Any suggestions? I can't use any position absolutes since the whole page is php driven and could have 1 or 10 tracks so the content has to be dynamic and reuseable.



Solution :

I cannot recreate the issue, as it seems to work fine in this demo (note: opacity was changed just to make it more obvious). However, a few things to note that might be causing issues.

1) The most likely issue is that it is invalid html to have a div in an a tag (block level element inside an inline), so some browsers may be having issues with that and not functioning correctly.

2) If your css above reflects your true css, then you have misspelled visibility ("visiblity") in setting the ribbon to visible.

3) Have you verified that the ribbon.png itself does not have its own, inherent opacity (since it is a png, it can have opacity in image itself).


    CSS Howto..

    How do you create and run an html page directly from LocalStorage?

    How to manage textarea right side overflow in css?

    How to add fade in and fade out effect in CSS animations no javascript?

    How to apply css on checkbox when it's getting disabled?

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to create diagonal boxes using css?

    What is default z-Index of
    element in HTML, and how to get it using JavaScript?

    How to put an image at the left side of text without putting the image into css

    how to center text and control user zoom in CSS

    How to redirect using css? [duplicate]

    How to disable caching of static assets like .css and .js in JSF2?

    How I can change the position of 3 div's to be side by side?

    How to make elliptical inner shadow with CSS?

    How to disable external css stylesheet - Newbie

    How to change a class CSS with a Greasemonkey script?

    CSS/JS: How do I copy the edge pixels and repeat them

    How to display “a” to full of the line

    css: how to make
    not highlighted when selecting text (in Chrome)

    How animate stacking divs in javascript/css?

    How to move the icon / button outside the textbox x-webkit-speech?

    How is box-shadow returned in IE9?

    Am centering content vertically using css, how to remove empty space?

    How to get rid of the spaces between CSS nav element borders?

    How to find out if the user scrolled to the end of a HTML container with jQuery?

    Learn how to arrange elements correctly using CSS [closed]

    How to have images in line with text in css

    How to do such layout with html+css?

    How to write CSS to convert div elements into a 3 or 4 column table?

    PHP - How to change the class of a link

    How to set all CSS values to their default? [duplicate]