0

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
		

5
  • It will be easier if you gave an online example via jsfiddle or codepen. Anyway, you need to either change the :hover to be on the wrapping block element instead of on the anchor (a) tag, OR you could change the anchor to be a block element by adding display: block to the anchor, and then you could give it dimensions.
    – Narxx
    Mar 27, 2016 at 10:47
  • Thank you verry much for your answer! I am new with coding and I am sorry for all my questions and mistakes... Can you give me an example with some solution implemented? Mar 27, 2016 at 10:55
  • I hope this helps: jsfiddle.net/msyLj79n it's just one example, but there are many different ways to do it.
    – Narxx
    Mar 27, 2016 at 11:02
  • Thanks Narxx i solved the problem :)) Mar 27, 2016 at 11:11
  • Yes, I see. That was the first suggestion I gave you: "you need to either change the :hover to be on the wrapping block element instead of on the anchor". This is exactly what you did :-)
    – Narxx
    Mar 27, 2016 at 11:37

3 Answers 3

0

Try this:

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

Live jsFiddle Demo

2
  • HEYYYYYY its working!!!! can you explain me what was the problem? I am new with coding and it took me all night trying to find how to do it! Mar 27, 2016 at 10:59
  • your welcome, you didn't have any problem. you should add this rule, but how it works? , you should use hover on your wrapper that you want to hover effect happen, that in your code is .stylish-popular-widget:hover , then write your target, that in your code is .meta-text h3 a but you need to override color because it took before, then you should use important .
    – Pedram
    Mar 27, 2016 at 11:02
0
}
.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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.