speech example

by cmoreira

HTML

<div id="ttshowcase_0"><div class="tt_theme_speech"><div class="ttshowcase_rl_breed"><div class="ttshowcase_rl_info_wrap tt_info-left tt_text_center"><div class="ttshowcase_rl_image tt_img_circle tt_img_none"><img src="http://localhost/pt/wp-content/uploads/2013/11/sheldon-80x80.png" width="50"></div><div class="ttshowcase_rl_aditional_info "><div class="ttshowcase_rl_title">Envato</div><div class="ttshowcase_rl_subtitle"><a href="http://test" target="_blank">teste name 2</a></div><div class="ttshowcase_rl_rating"> <span>☆</span> </div></div></div><div class="ttshowcase_rl_quote ttshowcase_rl_quote_sided tt_quote_info-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum suscipit hendrerit. Maecenas quam mauris, congue a mi et, tempus porta leo. Nam porta massa quis libero dignissim convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus.<div class="ttshowcase_rl_readmore"> <a href="http://localhost/pt/?ttshowcase=envato">+ Read More</a> </div></div></div></div></div>

CSS

/*

Version: 0.1
Last Modified: November 13 2013
Author: Carlos Moreira;

*/

.ttshowcase_rl_breed {
	padding: 3px;
}

.ttshowcase_clear {
	clear: both;
	display:block;
	height: 0px;
}

.ttshowcase_rl_box {
	
}

.ttshowcase_rl_info_wrap, .ttshowcase_rl_quote {
	
}

.ttshowcase_rl_readmore {
	font-size: 0.9em;
	margin:5px 0px;
}

.ttshowcase_rl_quote {


}

.ttshowcase_rl_title {
	font-weight: bold;
}

.ttshowcase_rl_subtitle {
	opacity: 0.8;
	font-size: 0.9em;
}

/* Rating CSS 

.tt_theme_speech .ttshowcase_rl_rating {
	  unicode-bidi: bidi-override;
	  direction: rtl;
	  text-align: center;
	}
.tt_theme_speech .ttshowcase_rl_rating > span {
	  display: inline-block;
	  position: relative;
	  width: 1.1em;
	  color: transparent;
	}
.tt_theme_speech .ttshowcase_rl_rating > span:before {
	   content: "\2605";
	   position: absolute;
	   left: 0; 
	   color: gold;
	}

*/

/* Image Settings 
'grayscale' => 'Grayscale',
'white-border' => 'White Border',
'shadow-highlight' => 'Shadow Highlight'
*/


/* Shadow Highlight */
.tt_img_shadow-highlight img {
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.8);
}

/* White Border */

.tt_img_white-border img {
	border:5px solid #FFFFFF;
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
	transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

.tt_img_white-border img:hover {
	border:5px solid #FFFFFF;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
	transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}

/* Grayscale */

.tt_img_grayscale  {
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /*...