Actionbox

actionbox shortcode

by sahiba25

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<a class="ctalink" href="http://www.google.com">
	<div class="ctabox" style="background-image: url('http://kitabummuneer.com/newsite/wp-content/uploads/2013/08/5.png'); width: 350px;">
	<div class="ctainner">
	<div class="titlebox"><h1 class="ctatitle">This is awesome</h1></div><!--end of titlebox-->
	<h4 class="ctabutton">Read more</h4>
	</div><!--end of ctainner-->
	</div><!--end of ctabox-->
    </a><!--end of ctalink-->

<!--
The above HTML code is actually supposed to be a shortcode.  Since there's no php window here, I'm pasting the shortcode function below:
// shortcode function for call to action boxes
function actionbox( $atts , $content = null ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'image' => 'URL',
			'title' => 'Title',
			'url' => 'Link',
		), $atts )
	);

	// Code
	return '<a class="ctalink" href="' . $url . '">
	<div class="ctabox" style="background-image: url(' . $image . '); width: 350px;">
	<div class="ctainner">
	<div class="titlebox"><h1 class="ctatitle">' . $title . '</h1></div>
	<h4 class="ctabutton">' . $content . '</h4>
	</div>
	</div></a>';
}
add_shortcode( 'CTA', 'actionbox' );

-->

CSS

.ctabox { width: 350px; height: 200px; font-family: Verdana; }

h1.ctatitle {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 16px;
  height: 40px;
  padding: 5px;
  text-align: center;
  width: 180px;
}

.titlebox {
  margin-left: -3px;
  padding-top: 105px;
}

h4.ctabutton {
  background-color: brown;
  border-radius: 3px 3px 3px 3px;
  color: white;
  margin-left: 25px;
  margin-top: -14px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  width: 120px;
}

.ctabutton a { color: white; }

JavaScript

$.getScript("http://ricostacruz.com/jquery.transit/jquery.transit.js", function(){
});   

$('.ctabox').hover(
    function() {
          $('.ctainner').transition({ y: -20 });
    }
    ,
    function() {
          $('.ctainner').transition({ y: 0 });
    }
    );