css transition effects on background AND text on hover

Question

I am trying to make the transition effect to work on both text and background on hover of the box but my result so far is two seperate effects. when i hover the box the transition on bg is working fine but the effect of the text is happening only when i hover the text itself. I would like to apply the color change when by hovering in the whole box not have to hover the text also. I need the bG color to change from black to white and the Title to change from white to black!

my css is

 .stylish-popular-widget { height: 150px; position: relative; width: 100%; } .stylish-popular-widget img { height: 150px; max-width: 100%; } .stylish-popular-widget .meta-text { background: rgba(0,0,0,.3); bottom: 0; top: 65%; /*adjust BG start position*/ left: 0; right: 0; position: absolute; text-align: left; padding-left: 10px; moz-transition: 1s; ms-transition: 1s; o-transition: 1s; transition: 1s; webkit-transition: 1s; } } .stylish-popular-widget .meta-text h3 { color: #FF0000 !important; } .stylish-popular-widget .meta-text h3 a { color: #fff !important; font-size: 25px; letter-spacing: 1px; } .stylish-popular-widget .meta-text h3 a:hover { text-decoration: none; color: #000 !important; } .stylish-popular-widget .meta-text h3 :hover { text-decoration: none; color: #000 !important; } .stylish-popular-widget .meta-text span.date { color: rgba(59,59,59,1); font-size: 11px; letter-spacing: 1px; padding-top: 30px; } .stylish-popular-widget:hover > .meta-text { background: rgba(255,255,255,.8); top:inherit; top: 0; } 

  <?php ?> <div class="stylish-popular-widget"> <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> <div class="meta-text"> <h3><a href="<?php echo get_permalink() ?>"> TEST</h3> <span class="date">thstrhsthths</span></a> </div> </a> </div> <?php 

Answer 1

}
.stylish-popular-widget img
{
    height: 150px;
    max-width: 100%;
}
.stylish-popular-widget .meta-text
{
    background: rgba(0,0,0,.3);
  color:white;
    bottom: 0;
    top: 65%; /*adjust BG start position*/
    left: 0;
    right: 0;
    position: absolute;
    text-align: left;
    padding-left: 10px;
    moz-transition: 1s;
    ms-transition: 1s;
    o-transition: 1s;
    transition: 1s;
    webkit-transition: 1s;
}

}
.stylish-popular-widget .meta-text h3
{

}
.stylish-popular-widget .meta-text h3 a
{
    color: inherit !important;
    font-size: 25px;
    letter-spacing: 1px;


}
.stylish-popular-widget .meta-text h3 a:hover 
{
    text-decoration: none;
    color: inherit !important;

}

.stylish-popular-widget .meta-text :hover 
{
    text-decoration: none;
  color:black;

}
.stylish-popular-widget .meta-text span.date
{
    color: rgba(59,59,59,1);
    font-size: 11px;
    letter-spacing: 1px;
    padding-top: 30px;

}
.stylish-popular-widget:hover > .meta-text
{
    background: rgba(255,255,255,.8);       
    top:inherit;
    top: 0;

}

<div class="stylish-popular-widget">
                    <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?>
                    <div class="meta-text">
                        <h3><a href="<?php echo get_permalink() ?>">
                        TEST</h3>
                        <span class="date">thstrhsthths</span></a>
                    </div>
                    </a>
                </div>

Something like this? Its the meta-text that controls the colours of your text here.

Answer 2

Try this:

.stylish-popular-widget:hover .meta-text h3 a {
  color: black!important;
}

Live jsFiddle Demo

Answer 3

You don't necessarily need multiple :hover -s to do this. You can use inheritance, depending on your design:

.stylish-popular-widget .meta-text {
    background: rgba(0,0,0,.3);
    bottom: 0;
    top: 65%; /*adjust BG start position*/
    left: 0;
    right: 0;
    position: absolute;
    text-align: left;
    padding-left: 10px;
    moz-transition: 1s;
    ms-transition: 1s;
    o-transition: 1s;
    transition: 1s;
    webkit-transition: 1s;
    color: #fff;
}

.stylish-popular-widget .meta-text h3 a {
    font-size: 25px;
    letter-spacing: 1px;
    color: inherit;  
}


.stylish-popular-widget:hover > .meta-text {
    background: rgba(255,255,255,.8);       
    top: 0;
    color: black;
}

And you probably don't need all those !important declarations.