WordPress shortcode problems with css hover

4 Views

I am trying to solve an issue with CSS on my shortcode.

You can see it here in action:

Read More

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.

Post Views: 4

Related posts

Leave a Reply

1 comment

  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;
}