CODEWITHSUNDEEP
htmlcsscss-transitions
Case
Case

Reputation: 281

Transitions browser issue Css3

I have searched and I am unable to locate a solution. I have a section with an id called #games and i have the following link setup.

#games a {
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}
<section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

It works in Mozilla but it has like a buggy transition. and in chrome or explorer it does not work at all. I am also using foundation. I removed the foundation css but it had no affect.

Upvotes: 0

Views: 40

Answers (4)

Dominic Aquilina
Dominic Aquilina

Reputation: 617

So a few issues following up from my comment on the original post.

First: anchors are inline elements by nature. You can't put block elements inside inline elements, so this is where the other answers come into play (make your anchor inline-block or block).

Second: You don't need to redefine your transition on hover unless you're changing the properties. :hover is a more specific selector, but it doesn't invalidate other styles on that element. You should also probably explicitly add a transition function to both tailor your application's behaviour to your needs and to make the style more readable.

Third: Opacity is universally supported after IE8, so you don't really need the filter. This is especially true since you have a different opacity specified by the filter, which will result in inconsistent behaviour.

Fourth: Transitions are also widely supported. The only prefix you really need is -webkit-, and even that isn't really needed most of the time.

Updated code:

#games a {
    display: block;
    opacity: 1.0;
    
    -webkit-transition: opacity .5s ease;
            transition: opacity .5s ease;
}

#games a:hover {
    opacity: 0.6;
}
<section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <!-- This image is dead anyway, so I'm commenting it out for now -->
            <!-- <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> -->
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Upvotes: 1

alexwc_
alexwc_

Reputation: 1603

You can use display:inline-block on #game a.

#games a {
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
    display:inline-block;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}
<section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="images/games/myimage.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17697

use display:block on a and it will work this is because the a tag is an inline element. and if you 'inspect element' on the 'a' element you will see that it doesn't wrap around the elements that are inside it .

let me know if this is what you were looking for

#games a {
  display:block;
    opacity: 1.0;
    filter: alpha(opacity = 100);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}

#games a:hover {
    opacity: 0.6;
    filter: alpha(opacity = 5);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;    
    transition: .5s;
}
<section id="games">
    <a href="https://www.game.com" target="_blank">
        <div class="columns small-12 medium-6 large-3 col-pad">
            <img src="images/games/myimage.jpg">
            <h3>My Game Title</h3>
            <dl class="clearfix">
                <dd>Gamename</dd>
                <dd>Stats</dd>
            </dl>
        </div>
    </a>
</section>

Upvotes: 1

serraosays
serraosays

Reputation: 7889

I think your transition statement is missing the fade parameter - try:

transition: opacity .5s ease-in-out;

Upvotes: 1

Related Questions