Styling

/* Imageshow - Rounded Corners */
.jsn-gallery .box_skitter .image,
.jsn-gallery .box_skitter .box_clone img {	
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

/* Rounded Corners - Remove the coloured background */
#jsn-promo {
    background-color: transparent;
}

Full Styles (grabbed from templates)

Teki

CSS

/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
	position: absolute;
	max-width: 100% !important;
	width: 500px !important;
	height: 100%;
	left: 150px !important;
	top: 150px !important;
	right: auto;
	margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
	background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.6em !important;
	background-color: rgba(0,0,0,0.6);
	margin: 0;
	padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
	display: inline-block;
	background-color: rgba(0,0,0,0.4);
	padding: 15px 20px;
	color: #EEE !important;
	font-size: 13px !important;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-demo-page .galleria-info {
		left: 0 !important;
		top: 0 !important;
	}
	.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
		font-size: 1.2em !important;
	}
}

CSS - This is an alternative that I am getting to run on JSN Medis

/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
    position: absolute;
    max-width: 100% !important;
    width: 350px !important;
    height: 100%;
    left: 150px !important;
    top: 150px !important;
    right: auto;
    margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
    background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.2em !important;
    background-color: rgba(0,0,0,0.6);
    margin: 0;
    padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
    display: block; /* changed this from inline-block to fix stacking */
    background-color: rgba(0,0,0,0.4);
    padding: 15px 20px;
    color: #EEE !important;
    font-size: 13px !important;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
    .jsn-demo-page .galleria-info {
        left: 100px !important;
        top: 100px !important;        
    }
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
    .jsn-demo-page .galleria-info {
        left: 0 !important;
        top: 0 !important;
    }
    .jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
        font-size: 1.2em !important;
    }
}

Settings

Remove .jsn-demo-page class to allow use any where, or use the jsn-demo-page as a page class to be more specific. The code is otherwise untouched.

These sliders are based on the theme, Theme Classic and uses the following settings. The rest are left as default.

Theme Classic Settings

Image Tab
Default Presentation Mode = Expand Out
Expand Out/Image click Action = No Action

Thumbnail Tab
Thumbnail Panel Presentation = Hide

Toolbar Tab
Toolbar Panel Presentation = Hide

Slideshow Tab
Sliding Timing = 10
Auto Play = Yes

CSS - Demo/Default code from within the Imageshow admin

Title
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description
font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

Link
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

see citygate or luton accountants

Epic

CSS - Demo code from within the Imageshow admin

title
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description
font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

link
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

One

This is all of the mobile code for the One slider style, but the reduced version below might be all that is required.

CSS

/* Imageshow - One Style */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
	width: 100% !important;
}
.jsn-demo-page .label_skitter {
	left: 50% !important;
	top: 50% !important;
	margin-top: -100px;
	margin-left: -580px;
	width: 400px !important;
	max-width: 100%;
	opacity: 1;
	background: rgba(0,0,0,0.6);
	padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
	text-transform: uppercase;
	font-size: 2em;
	color: #fff;
	padding: 10px 0;
	border-bottom: 2px solid #8D84E4;
	display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 4em;
	color: #fff;
	padding: 15px 0;
	display: block;
}
@media only screen and (max-width: 1366px), (max-device-width: 1366px) {
	.p-item .pthumb h3 {
		font-size: 28px;
		margin-top: -20px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	.jsn-desktop-on-mobile.jsn-demo-page .demo-join-newsletter { 
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkitbox-sizing: border-box;
	}
	.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
		margin-left: -500px;
	}
	.jsn-mobile.featured-fashion .container {
		width: 100%;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter {
		width: auto;
		padding: 30px;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
		font-size: 1.1em;
		line-height: 45px;
	}
	.jsn-mobile.jsn-demo-page #jsn-pos-content-bottom {
		padding: 0 !important;
	}
	.jsn-mobile.product-block [class*="span"] {
		width: 100% !important;
		margin: 0 !important;
	}
	.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
		width: 24.96%;
	}
	.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child,
	.jsn-mobile.jsn-demo-page div.jsn-horizontallayout div.jsn-modulecontainer {
		margin-top: 30px;
	}
	.jsn-mobile.owl-carousel {
		margin-top: 20px;
	}
	.jsn-mobile.demo-promo-products .owl-carousel {
		margin-top: 0;
	}

	.jsn-mobile.jsn-demo-page .label_skitter {
		left: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		margin-left: 0;
		margin-top: 0;
		padding: 10px;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
		font-size: 1em;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
		font-size: 1.4em;
		padding: 0;
		margin: 0 10px;
	}
	.jsn-mobile.demo-promo-box .promo-heading {
		font-size: 2.5em;
	}
}
@media only screen and (max-width: 768px), (max-device-width: 768px) {
	.jsn-mobile #jsn-content-top-below .row-fluid.product-block [class*="span"] {
		width: 100%;
	}
	.jsn-mobile #jsn-content-top-below .row-fluid.product-block .span9 {
		margin-left: 0;
	}
}
@media only screen and (max-width: 640px), (max-device-width: 640px) {
	.jsn-mobile .demo-promo-box .promo-heading {
		font-size: 3em;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading,
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .link-button {
		float: none;
		margin-bottom: 25px;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
		line-height: 30px;
	}
	.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
		width: 100%;
	}
	.jsn-mobile .text-heading.large-head span {
		max-width: 100%;
	}
	.jsn-mobile.jsn-demo-page .label_skitter {
		display: none;
	}
	.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child {
		margin-top: 0;
	}
	.jsn-mobile .demo-promo-box {
		padding: 30px 0 60px;
	}
	.jsn-mobile .demo-promo-box .promo-heading {
		font-size: 1.5em;
	}
	.jsn-mobile .text-heading.large-head > h1 {
		font-size: 23px;
	}
	.jsn-mobile .p-item .pthumb .mask a {
		display: none;
	}
	.jsn-mobile .p-item .pthumb .mask h3 {
		font-size: 1em;	
	}
	.jsn-mobile .p-item .pthumb .mask h3 a {
		display: block;
	}
	.jsn-mobile .sec-recent-work1 .btn-group {
		white-space: normal;
	}
}

CSS - One Trimmed down

This might be the only required code of the above version to get the One slider style working. Please sort when next using.

/* Imageshow - Unknown Style */
/* Need to make the module it sits in have  0 border */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
	width: 100% !important;
}
.jsn-demo-page .label_skitter {
	left: 50% !important;
	top: 50% !important;
	margin-top: -100px;
	margin-left: -580px;
	width: 400px !important;
	max-width: 100%;
	opacity: 1;
	background: rgba(0,0,0,0.6);
	padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
	text-transform: uppercase;
	font-size: 2em;
	color: #fff;
	padding: 10px 0;
	border-bottom: 2px solid #8D84E4;
	display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 4em;
	color: #fff;
	padding: 15px 0;
	display: block;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
		margin-left: -500px;
	}	
	.jsn-mobile.jsn-demo-page .label_skitter {
		left: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		margin-left: 0;
		margin-top: 0;
		padding: 10px;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
		font-size: 1em;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
		font-size: 1.4em;
		padding: 0;
		margin: 0 10px;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .label_skitter {
		display: none;
	}
}

Imageshow Defaults (inside admin)

CSS

Title CSS

font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description CSS

font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

Link CSS

font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

Promo Intro Text (ImageShow Overlay)

I grabbed this from the JSN Dona template and have adapted it below so I can use it anywhere I want. This overlay fits over ImageShow and allows you to rotate images behind it. The button is also a Joomlashine Button with animation and styling.

CSS

/*--- Promo Intro Text ---*/

/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
	margin: 0;
	position: relative;
}

.promo-intro-text {
	text-align: center;
	position: absolute;
	top: 210px; /* This changes the position of the text on image show */
	width: 100%;
	z-index: 99;
	color: #fff;
}

.promo-intro-text .promo-intro-text-inner h2 {
	padding: 0 10px;
}

.promo-intro-text .promo-intro-text-inner h2 span {
	text-transform: uppercase;
	font-size: 72px;
	line-height: 80px;
	font-weight: 700;
	text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
	display: block;
}

.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	display: inline-block;
	font-size: 48px;
	line-height: 56px;
	border-top: 2px solid rgba(255,255,255, 0.6);
	border-bottom: 2px solid rgba(255,255,255, 0.6);
	padding: 2px 0;
	margin-top: 10px;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	font-size: 18px;
	line-height: 30px;
	margin-top: 30px;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	margin-top: 20px;
	padding: 10px 25px;
}

@media screen and (max-width: 1400px) {
	.promo-intro-text {
	  top: 150px;
	}
}

@media screen and (max-width: 1280px) {
	.promo-intro-text {
	  top: 110px;
	}
}

@media screen and (max-width: 1024px) {
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 50px;
	  line-height: 58px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 30px;
	  line-height: 38px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	  font-size: 14px;
	  line-height: 22px;
	  margin-top: 15px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	  margin-top: 10px;
	}
}

@media screen and (max-width: 799px) {
	.promo-intro-text {
	  top: 20px;
	}
}

@media screen and (max-width: 640px){
	.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	  display: none;
	}
}

@media screen and (max-width: 480px) {
	.promo-intro-text {
	  top: 10px;
	}
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 30px;
	  line-height: 38px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 20px;
	  line-height: 28px;
	}
}

@media screen and (max-width: 360px) {
	.promo-intro-text {
	  top: 0;
	}
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 20px;
	  line-height: 28px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 12px;
	  line-height: 20px;
	  margin-top: 5px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	  margin-top: 5px;
	  padding: 6px 15px;
	}
}

CSS (Optional)

/*-- Orange Button - not required in Joomlshine templates --*/

.link-button {
	cursor: pointer;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 8px 25px;
	display: inline-block;
	text-decoration: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.link-button, .link-button a {
	transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
}

a.link-button, .link-button a {
	font-weight: 300;
	color: #fff;
}

.link-button.button-orange, .link-button.button-orange:hover {
	background-color: #f26522;
}

HTML

<div class="promo-intro-text">
	<div class="promo-intro-text-inner">
		<h2 class="promo-intro-title">
			<span class="pm-t1">THE</span>
			<span class="pm-t2">QUANTUMWARP BLOG</span></h2>
		<p class="promo-intro-desc">
			Technology And Geek Blog<br />
			Articles and Information From My Personal Experience
		</p>
		<span><a href="#" class="link-button button-orange promo-intro-btn">Random Article</a></span>
	</div>
</div>

Notes

• Publish in promo position
• Publish ImageShow in the promo position
• Make sure that Imageshow is published after the 'Promo Intro Text' module

Promo Intro Text - Improved (ImageShow Overlay)

I have made alterations to Promo Intro Text (ImageShow Overlay) to make it cleaner code and more stylable including the ability to add coloured semi-transparent backgrounds with rounded corners to the individual lines for better visibility.

CSS

/*--- Promo Intro Text - Improved ---*/
 
/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
    margin: 0;
    position: relative;
}
 
.promo-intro-text {
    text-align: center;
    position: absolute;
    top: 150px; /* This changes the position of the text on image show */
    width: 100%;
    z-index: 99;
    color: #fff;
}

/* set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";

	padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.promo-intro-text .promo-intro-text-inner h2 {
    padding: 0 10px;
}
 
.promo-intro-text .promo-intro-text-inner h2 span {
    text-transform: uppercase;
    font-size: 72px;
    line-height: 80px;
    font-weight: 700;
    text-shadow: 1px 1px 1px #333;
}
 
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
    display: inline-block;
}
 
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
    display: inline-block;
    font-size: 48px;
    line-height: 56px;
    border-top: 2px solid rgba(255,255,255, 0.6);
    border-bottom: 2px solid rgba(255,255,255, 0.6);
    padding: 2px 0;
    margin-top: 10px;
}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
    display: inline-block;
	font-size: 18px;
    line-height: 30px;
    margin-top: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}

.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
}
 
@media screen and (max-width: 1400px) {
    .promo-intro-text {
      top: 90px;
    }
}
 
@media screen and (max-width: 1280px) {
    .promo-intro-text {
      top: 50px;
    }
}
 
@media screen and (max-width: 1024px) {
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 50px;
      line-height: 58px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 10px;
    }
}
 
@media screen and (max-width: 799px) {
    .promo-intro-text {
      top: 20px;
    }
}
 
@media screen and (max-width: 640px){
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      display: none;
    }
}
 
@media screen and (max-width: 480px) {
    .promo-intro-text {
      top: 10px;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 20px;
      line-height: 28px;
    }
}
 
@media screen and (max-width: 360px) {
    .promo-intro-text {
      top: 0;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 20px;
      line-height: 28px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 12px;
      line-height: 20px;
      margin-top: 5px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 5px;
      padding: 6px 15px;
    }
}

CSS (Optional)

/*-- Orange Button - not required in Joomlshine templates --*/
 
.link-button {
    cursor: pointer;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 8px 25px;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
 
.link-button, .link-button a {
    transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
}
 
a.link-button, .link-button a {
    font-weight: 300;
    color: #fff;
}
 
.link-button.button-orange, .link-button.button-orange:hover {
    background-color: #f26522;
}

HTML

<div class="promo-intro-text">
	<div class="promo-intro-text-inner">
		<h2 class="promo-intro-title">
			<span class="pm-t1">THE</span><br />
			<span class="pm-t2">QUANTUMWARP BLOG</span>
		</h2>
		<p class="promo-intro-desc">
			Technology And Geek Blog<br />
			Articles and Information From My Personal Experience<br />			
		</p>
		<div class="promo-intro-button-wrapper">
			<a href="http://quantumwarp.com/" class="link-button button-orange promo-intro-btn">Random Article</a>
		</div>
	</div>
</div>

Notes

• Publish in promo position
• Publish ImageShow in the promo position
• Make sure that Imageshow is published after the 'Promo Intro Text' module

Promo Intro Text - Improved (ImageShow Overlay) V2

This is just another style version with slightly different look. on the smallest devices the text is hidden.

CSS

/*--- Promo Intro Text - Improved ---*/
  
/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
    margin: 0;
    position: relative;
}
  
.promo-intro-text {
    text-align: center;
    position: absolute;
    width: 100%;
    z-index: 99;
    color: #fff;
}
 
/* Set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
     
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";
 
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 
.promo-intro-text .promo-intro-text-inner h2 {
    padding: 0 10px;
}
  
.promo-intro-text .promo-intro-text-inner h2 span {
    text-transform: uppercase;
    font-size: 72px;
    line-height: 80px;
    font-weight: 700;
    text-shadow: 1px 1px 1px #333;
}
  
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
    display: inline-block;
}
  
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
    display: inline-block;
    font-size: 48px;
    line-height: 56px;
    border-top: 2px solid rgba(255,255,255, 0.6);
    border-bottom: 2px solid rgba(255,255,255, 0.6);
    padding: 2px 0;
    margin-top: 10px;
}
  
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    margin-top: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
}
 
 
.promo-intro-text {
    top: 150px; /* This changes the position of the text on image show */
}

@media screen and (max-width: 1400px) {
    .promo-intro-text {
      top: 150px;
    }
}
  
@media screen and (max-width: 1280px) {
    .promo-intro-text {
      top: 150px;
    }
}
  
@media screen and (max-width: 1024px) {
    .promo-intro-text {
		top: 125px;
    }	
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 50px;
      line-height: 58px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 10px;
    }
}
  
@media screen and (max-width: 799px) {
    .promo-intro-text {
      top: 75px;
    }
}
  
@media screen and (max-width: 640px){
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      display: none;
    }
}
  
@media screen and (max-width: 480px) {
    .promo-intro-text {
      top: 10px;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 20px;
      line-height: 28px;
    }
}
  
@media screen and (max-width: 360px) {
    .promo-intro-text {
      top: 0;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 20px;
      line-height: 28px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 12px;
      line-height: 20px;
      margin-top: 5px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 5px;
      padding: 6px 15px;
    }
}

HTML

<div class="promo-intro-text">
    <div class="promo-intro-text-inner">
        <p class="promo-intro-desc">NEWS, REMINDERS AND INCENTIVES<br /><br />Visit our social media pages by clicking <br />on an icon below and register to receive news,<br />updates and reminders relating to<br />the business, services, events, competitions and prizes.</p>
    </div>
</div>