DataDev DataDev - 2 months ago 10
HTML Question

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.

Answer

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>

Comments