Wordpress shortcode problems with css hover - css

Question

I am trying to solve an issue with CSS on my shortcode.
You can see it here in action:
http://www.mariovital.com/jose-ollin/sample-page
and the shortcode code:
// Add Shortcode
function servicos_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'posicao' => '',
'icon' => 'default.png',
'titulo' => 'O Serviço',
'link' => '',
), $atts )
);
// Code
return '
<div class="span3 fp-'.$posicao.'">
<div class="widget-front">
<div class="thumb-wrapper tc-holder">
<a class="round-div" href="'.$link.'" title="'.$titulo.'"></a>
<img src="'.$icon.'" alt="'.$servico.'">
</div>
<!-- /.widget-front -->
<h4>'.$titulo.'</h4>
</div>
</div> ';
}
add_shortcode( 'servicos', 'servicos_shortcode' );
The problem is with the hover selector you can see on my test page. I really don't know what is wrong with the CSS code.

Answer 1

I assume that you want the hover effect should happen to a particular div when it hovers by users. And it should not happen to all of those divs at once. So here goes the solution -
On your CSS, you have setup hover effect for both <article> and <div class="widget-font">
.widget-front.hover .round-div,
article.hover .round-div {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
But if you don't want the hover effect should affect all the divs inside the article. So, just remove the article.hover .round-div from CSS and your final snippet should looks like this -
.widget-front.hover .round-div {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
EDIT :
I just have a look at your code. You still have article.hover .round-div on your CSS code. If the CSS is generating externally and you are not able to change that, you can add this following code at the end -
article.hover .round-div {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}