Geek asks and answers

CSS: round corners + opacity = image disappears in Firefox 19

I want to add rounded corners to my images using CSS, and also change the opacity on the mouse, because it's cute. There is an error: after the mouse, the image disappears.

CSS is pretty simple:

.article img {
  margin-bottom: 5px;
  -moz-border-radius: 15px;  /* for Firefox */
  -webkit-border-radius: 15px; /* for Webkit-Browsers */
  border-radius: 15px; /* regular */
}

.article:hover .img {
  opacity: 0.8;
}

html is also just for the test (this is the first image I searched on googled):

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

You can see this on jsfiddle: http://jsfiddle.net/9DjLT/3/

Browser: ff19

+5
source share
3 answers

I recently ran into this problem while trying to implement block-level links to my site , and I solved this by adding the following rule to un-hovered img:

border: 0.001em solid transparent;

Of course, hack, but it seems to work.

+4
source

, css - li: 100% . , . CSS

.img a:hover{
  opacity: 0.8;
 }
0

FWIW, I encountered a similar problem in Chrome 38. In my case, I had a div with a value border-radiusand an image element with a transparency value, and the transparent image was hidden. To fix this, I added non-1 opacity to the parent element (with border radius). Something like that:

.round_box {
  border-radius: 5px;
  opacity: 0.999999;
}

.transparent {
  opacity: 0.6;
}

<div class="round_box">
  <div class="transparent">
</div>

... Adding opacity: 0.999999;to the parent element ensures that the transparent element is displayed correctly. I should note that I also have many other interesting styles - drop shadows, layout layout, but perhaps a similar hack will work for others.

0
source

More articles:


All Articles