Question

I’m trying to put a vignette on an image link, that when hovered over dissipates. The current code I’m using works fine in Firefox, but in chrome, the transition effect doesn’t run.

If you were to remove the thumbnail image, the background has the same effect and does show the transition on it.

Is this a bug?

<article>
                <div class="thumbnail">
                    <a href="#"><img src="images/download.jpg" alt="" /></a>
                </div>
                <div class="article-text">
                    <h3>Article Header</h3>
                    <div class="author">
                        Author Name here.  Date Posted Here.
                    </div>
                    <p>Lorem ipsum</p>
                    <div class="meta">
                        <ul class="meta-items">
                            <li>Arbitrary Number</li>
                        </ul>
                        <a class="button" href="#">
                            <span>Read More</span>
                        </a>
                    </div>
                </div>
            </article>

The full css/html can be seen on JSfiddle:
http://jsfiddle.net/aSTKK/

Answer 1

No, it is not a bug. Transitions on pseudo-elements only work in Firefox (personally, I’d like to see them working in other browsers in the future), though there is a way to emulate them for some properties. If you remove the thumbnail image, you see the transition on the element itself (which is below the image when you have it), not on the pseudo-element.

Possible solution: you could make the image semitransparent and change its opacity to 1 on hover (see this gallery of examples I did a while ago, especially row 3, column 3).

Something like this (I’ve changed the shadow on the pseudo-element to red in order to make it more visible).

Relevant CSS:

.thumbnail {
    width:48%;
    height:200px;
    float:left;
    padding:0;
    background:#37779f;
    box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5);
    -webkit-transition: 1.3s;
    -moz-transition: 1.3s;
    transition: 1.3s;
    overflow:hidden;
    text-align:center;
}
.thumbnail a{
    position:relative;
    max-width:100%;
    float:left;
}
.thumbnail:hover{
    box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5);
}
.thumbnail a:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    box-shadow:inset 0 0 115px 20px rgba(255,0,0,1);  
}
.thumbnail img {
    width:100%;
    height:auto;
    opacity: .3;
    -webkit-transition: 1.3s;
    -moz-transition: 1.3s;
    transition: 1.3s;
}
.thumbnail:hover img {   
    opacity: 1;
}​