Help

Zoom In/Out Effect SLIDERS FULL COLLECTION

Thank you for purchasing our product!

Files Structure
HTML/JS code for implementation
JS Options
Slider Content Definition
Layer Animation
How To Use It As FullScreen Background
How To Disable Zoom In/Out Effect
CSS Advices For Text Responsive Behavior

Files Structure

css file
skins folder
js folder
images folder
html files

css file

The product uses bannerscollection_zoominout.css file which contains the skin and texts classes

skins folder

The images used by the skins are located in this folder and distributed in subfolders with the skin name.

js folder

All the .js files are located in this folder. The product uses jquery. The product is generated by bannerscollection_zoominout.js

images folder

We put all the images in this folder. If needed, you can use a different one.

html files

For your convenience we've created for each skin and dimension (fixed dimensions, full width) a .html file. In each file you'll find all the necessary code for implementation for each skin and example.

HTML/JS code for implementation

Step 1: Copy on your server/project the following files and folders: images, js, skins, bannerscollection_zoominout.css. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the skin/type & example you want to use. For example, if you want to use "opportune" skin/type with Fixed DImension open opportuneFixedDimensions.html
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you opened (EX: opportuneFixedDimensions.html) to assure you include the skin/type & example correctly. Don't forget to set responsive: false, in case you don't need resposnisve behavior.

<link href="bannerscollection_zoominout.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
responsive:true,
autoPlay:10,
width: 960,
height: 400,
circleRadius:8,
circleLineWidth:4,
circleColor: "#ffffff", //849ef3
circleAlpha: 50,
behindCircleColor: "#000000",
behindCircleAlpha: 20,
fadeSlides:false,
thumbsWrapperMarginTop:30
});

});
</script>

Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: opportuneFixedDimensions.html) to assure you include the skin/type correctly.

</ul>


<div id="bannerscollection_zoominout_photoText1" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line textElement11_opportune"
data-initial-left="468"
data-initial-top="242"
data-initial-scale="3"
data-final-scale="1"
data-final-left="468"
data-final-top="242"
data-duration="0.5"
data-fade-start="0"
data-delay="0.5">
Ultra-Smooth
</div>

<div class="bannerscollection_zoominout_text_line textElement11_opportune"
data-initial-left="670"
data-initial-top="242"
data-initial-scale="0"
data-final-scale="1"
data-final-left="670"
data-final-top="242"
data-duration="0.5"
data-fade-start="0"
data-delay="1.2">
<a href="http://codecanyon.net/user/LambertGroup" target="_blank">Zoom In/Out Effect</a>
</div>

<div class="bannerscollection_zoominout_text_line textElement12_opportune"
data-initial-left="200"
data-initial-top="284"
data-initial-skew="-50deg,0deg"
data-final-skew="0deg,0deg"
data-final-left="468"
data-final-top="284"
data-duration="0.5"
data-fade-start="0"
data-delay="2">
Customizable with many parameters
</div>
</div> 

<div id="bannerscollection_zoominout_photoText2" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line textElement21_opportune"
data-initial-left="62"
data-initial-top="0"
data-final-left="62"
data-final-top="108"
data-duration="0.5"
data-fade-start="0"
data-delay="0">
For each image
</div>

<div class="bannerscollection_zoominout_text_line textElement22_opportune"
data-initial-left="62"
data-initial-top="200"
data-final-left="62"
data-final-top="79"
data-duration="0.5"
data-fade-start="0"
data-delay="0.3">
You can define optional external link
</div>
</div>

<div id="bannerscollection_zoominout_photoText4" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line textElement41_opportune"
data-initial-left="200"
data-initial-top="66"
data-initial-skew="80deg,40deg"
data-final-skew="0deg,0deg"
data-final-left="546"
data-final-top="66"
data-duration="0.5"
data-fade-start="0"
data-delay="0">
Animated text from any direction
</div>

<div class="bannerscollection_zoominout_text_line textElement42_opportune"
data-initial-left="900"
data-initial-top="93"
data-initial-skew="80deg,40deg"
data-final-skew="0deg,0deg"
data-final-left="546"
data-final-top="93"
data-duration="0.5"
data-fade-start="0"
data-delay="0.3">
top, bottom, left and right
</div>

<div class="bannerscollection_zoominout_text_line textElement43_opportune"
data-initial-left="546"
data-initial-top="400"
data-initial-skew="80deg,40deg"
data-final-skew="0deg,0deg"
data-final-left="546"
data-final-top="130"
data-duration="0.5"
data-fade-start="0"
data-delay="0.5">
Any color, CSS and HTML formated
</div>
</div> 

<div id="bannerscollection_zoominout_photoText5" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line textElement51_opportune"
data-initial-left="75"
data-initial-top="50"
data-final-left="75"
data-final-top="50"
data-duration="0.5"
data-fade-start="0"
data-delay="0">
Certainly this is the collection of Zoom In/Out sliders<br />that you have longed for. Grab it now!
</div>

<div class="bannerscollection_zoominout_text_line textElement52_opportune"
data-initial-left="500"
data-initial-top="105"
data-initial-skew="50deg,0deg"
data-final-skew="0deg,0deg"
data-final-left="180"
data-final-top="105"
data-duration="0.4"
data-fade-start="0"
data-delay="0.3">
MORE<br />Zoom In/Out<br />SKINS
</div>

<div class="bannerscollection_zoominout_text_line textElement53_opportune"
data-initial-left="65"
data-initial-top="8"
data-initial-scale="5"
data-final-scale="1"
data-final-left="65"
data-final-top="80"
data-duration="0.3"
data-fade-start="0"
data-delay="0.5">
2
</div>

<div class="bannerscollection_zoominout_text_line textElement54_opportune"
data-initial-left="185"
data-initial-top="233"
data-final-left="185"
data-final-top="233"
data-duration="1"
data-fade-start="0"
data-delay="0.5">
<a href="http://codecanyon.net/user/LambertGroup" target="_blank">Enjoy Them RIGHT HERE!</a>
</div>
</div> 

</div>

JS Options

Attribute	Default Value	Description
General settings
skin	'opportune'	Possible values: - opportune - majestic - generous
responsive	true	Possible values: true - the banner will responsive false - the banner will not be responsive
responsiveRelativeToBrowser	true	Possible values: true - the banner will be responisve relatively to browser dimensions false - the banner will be responisve relatively to parent div
width	918	banner width. If responsive=false this is the exact banner width. If responsive=true this is also used to determine resize proportions
height	382	banner height. If responsive=false this is the exact banner height. If responsive=true this is also used to determine resize proportions
width100Proc	false	Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter
height100Proc	false	Possible values: true - the banner height will be 100% false - the banner height will be what you've set for 'height' parameter
fadeSlides	true	Possible values: true - the transition between the slides will be 'Fade' false - the transition between the slides will be 'Slide'
autoPlay	10	You can define the time (in seconds) until the next slide will play. If you set it 0 the banner will not autoplay * If needed, for each slide you can set particular auto-play time, usind 'data-autoPlay'** parameter. Please refer to Slider Content Definition section
loop	true	Possible values: true - the banner will loop when reaches the end false - the banner will stop when reaches the end
target	'_blank'	Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window
enableTouchScreen	true	Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled
myloaderTime	4	the delay time (in seconds) to postpone the slider start. In this time, a rotating cicle will appear in the middle of the slider to signal that the slider is in loading status NOTE: to gain time when you are testing your slider, because the slider is already in cache, set myloaderTime:0.
pauseOnMouseOver	true	Possible values: true - enables autoPlay pause on mouse over false - disables autoPlay pause on mouse over
setAsBg	false	Possible values: true - if you intend to use the plugin as full screen background false - if you don't intend to use the plugin as full screen background
absUrl		the url to the skins folder.
scrollSlideDuration	0.8	Time to make the transition/animation from one slide to another
scrollSlideEasing	'easeOutQuad'	The animation (from one slide to another) easing. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
defaultEasing	'swing'	The defaut easing for layer animation. By layer, we understand a text or an image which comes over the main image. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack * If needed, for each element you can set particular easing, usind 'data-easing'** parameter. Please refer to Layer Animation section


Ken Burns Effect Settings
horizontalPosition	'center'	Using this parameter the script will determine both the photo initial horizontal pozition and KenBurns effect direction Possible values: - left - center - right
verticalPosition	'center'	Using this parameter the script will determine both the photo initial vertical pozition and KenBurns effect direction Possible values: - top - center - bottom
initialZoom	1	initial photo zoom value. We recommend values between 0.5 - 1
finalZoom	0.8	final photo zoom value. We recommend values between 0.5 - 1
duration	20	the KenBurns effect duration in seconds
durationIEfix	30	this value will be added to the 'duration' value for IE (versions under IE10) browsers if width100Proc=true. This is done because IE (prior to IE10) doesn't support css3 transitions and IE rendering engine is very poor. For IE browsers (prior to IE10), if we have full width or full screen banners we need to make the move slower.
zoomEasing	'ease'	the KenBurns effect default easing Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack

Thumbs Settings - available only for majestic and generous skins
numberOfThumbsPerScreen	0	the number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 4
thumbsOnMarginTop	0	for the thumbs that are on, there is an arrow pointing the active thumb. Using this parameter you can change the vertical position of this arrow
thumbsWrapperMarginTop	0	the vertical pozition of the thumbs area (also available for opportune skin)

Circle Timer Settings
showCircleTimer	true	Possible values: true - shows the circle timer false - hides the circle timer
circleRadius	10	circle radius
circleLineWidth	4	circle line width
circleColor	"#FF0000"	circle color, in hexa
circleAlpha	100	circle alpha, in percents. Posible values 0-100
behindCircleColor	"#000000"	behind circle color, in hexa
behindCircleAlpha	50	behind circle alpha, in percents. Posible values 0-100

Default Values For Layers Exit Move
defaultExitLeft	0	the default left position, for layer exit (in pixels) * If needed, for each element you can set particular exit left, usind 'data-exit-left'** parameter. Please refer to Layer Animation section
defaultExitTop	0	the default top position, for layer exit (in pixels) * If needed, for each element you can set particular exit top, usind 'data-exit-top'** parameter. Please refer to Layer Animation section
defaultExitDuration	0	the default duration, for layer exit (in seconds) * If needed, for each element you can set particular exit duratio, usind 'data-exit-duration'** parameter. Please refer to Layer Animation section
defaultExitFade	1	the default opacity value, for layer exit (values between 0-1) * If needed, for each element you can set particular exit duratio, usind 'data-exit-fade** parameter. Please refer to Layer Animation section
defaultExitDelay	0	the default time delay, for layer exit (in seconds) * If needed, for each element you can set particular exit delay, usind 'data-exit-delay'** parameter. Please refer to Layer Animation section
defaultExitEasing	'swing'	the default easing, for layer exit (in pixels) Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack * If needed, for each element you can set particular exit easing, usind 'data-exit-easing'** parameter. Please refer to Layer Animation section
defaultExitOFF	false	Possible values: true - the layers will not exit false - the layers will exit and according to exit left, top, delay, duration and easing value * If needed, for each element you can set particular exit OFF, usind 'data-exit-off'** parameter. Please refer to Layer Animation section

Controllers Settings
showAllControllers	true	Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation)
showNavArrows	true	Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear
showOnInitNavArrows	true	Possible values: true - next, previous buttons will appear on first banner init false - next, previous buttons will not appear on first banner init
autoHideNavArrows	true	Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out
showBottomNav	true	Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear
showOnInitBottomNav	true	Possible values: true - bottom navigation buttons will appear on first banner init false - bottom navigations buttons will not appear on first banner init
autoHideBottomNav	true	Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out
showPreviewThumbs	true	Possible values: true - a preview image will appear on hovering each bottom button false - the preview image will not appear on hovering each bottom button

Example of usage:

Slider Content Definition

Inside the main div (ex: <div id="bannerscollection_zoominout_opportune">) you'll add a list:
<ul class="bannerscollection_zoominout_list">
Inside this list you'll add each screen content you want to be present in your banner. The code is:
<li>html content here</li>

Example of usage:

<ul class="bannerscollection_zoominout_list">
<li>html content1 here</li>
<li>html content2 here</li>
<li>html content3 here</li>
</ul>

</div>

The <li> element can have optional paramenters. This parameters are used to change the default/general settings for each slide.

Optional parameters:

Parameter	Ex. of usage	Description
data-horizontalPosition	<li data-horizontalPosition="left">html content here</li>	Using this parameter the script will determine both the photo initial horizontal pozition and KenBurns effect direction Possible values: - left - center - right
data-verticalPosition	<li data-verticalPosition="top">html content here</li>	Using this parameter the script will determine both the photo initial vertical pozition and KenBurns effect direction Possible values: - top - center - bottom
data-initialZoom	<li data-initialZoom="1">html content here</li>	initial photo zoom value. We recommend values between 0.5 - 1
data-finalZoom	<li data-finalZoom="0.8">html content here</li>	final photo zoom value. We recommend values between 0.5 - 1
data-duration	<li data-duration="10">html content here</li>	the KenBurns effect duration in seconds
data-zoomEasing	<li data-zoomEasing="linear">html content here</li>	the KenBurns effect easing Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack * If needed, for each element you can set particular exit easing, usind 'data-exit-easing'** parameter. Please refer to Layer Animation section
data-text-id	<li data-text-id="#text_id_animation">html content here</li>	Used to define the div id which will hold the animated text appearing over the content
data-video	<li data-video="true">html content here</li>	This parameter has to appear if you have video content beneath main photo
data-bottom-thumb	<li data-text-id="#text_id_animation" data-bottom-thumb="images/imposing/thumbs/thumb1.jpg">html content here</li>	A preview image will appear on hovering the corresponding bottom button
data-autoPlay	<li data-text-id="#text_id_animation" data-autoPlay="5">html content here</li>	You can define for each slide the time (in seconds) until the next slide will play. If you set it 0 the slider will not autoplay
data-link	<li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio">html content here</li>	You can specify a link associated to the primary photo
data-target	<li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio"data-target="_self">html content here</li>	Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window *** If all your links will behave the same, you can ignore this parameter and use target from JS options

Layer Animation

For each image you can define animated layer (text line or image). All texts associated with a photo will reside inside a div. The div id will be put as optional parameter "data-text-id"

<li data-text-id="#text_id_animation">html content here</li>

The div containing the layer will look like this. What you see below with red are mandatory classes:

For each line of text you can create a separate css class (Ex: particular_customizing1) to customize the layer line. Also, each text line has the following optional parameters to control the Layer Animation

Parameter	Description
Layer Enter Parameters
data-initial-left	the layer left initial postion (in pixels)
data-initial-top	the layer top initial postion (in pixels)
data-final-left	the layer left final postion (in pixels)
data-final-top	the layer top final postion (in pixels)
data-duration	the animation duration (in seconds)
data-fade-start	initial fade value. Values from 0 to 100
data-delay	delay time (in seconds)
data-easing	The easing for layer animation. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack *** If this parameter is not added, the value of JS parameter 'defaultEasing, will be used. Please refer to JS options section.
data-intial-skew	the layer initial skew value. Example: data-initial-skew="50deg,0deg" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-initial-scale	the layer initial scale value. Example: data-initial-scale="0" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-final-skew	the layer final skew value. Example: data-final-skew="0deg,0deg" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-final-scale	the layer final scale value. Example: data-final-scale="1" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp


Layer Intermediate Move Parameters
data-intermediate-left	the layer intermediate move left postion (in pixels)
data-intermediate-top	the layer intermediate move top postion (in pixels)
data-intermediate-skew	the layer intermediate move skew value. Example: data-intermediate-skew="50deg,0deg" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-intermediate-scale	the layer intermediate move scale value. Example: data-intermediate-scale="0" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-intermediate-duration	the layer intermediate move duration (in seconds)
data-intermediate-easing	The intermediate move easing Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack
data-intermediate-delay	the layer intermediate move delay time (in seconds)

Layer Exit Parameters
data-exit-left	the left position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'defaultExitLeft', will be used. Please refer to JS options section
data-exit-top	the top position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'defaultExitTop', will be used. Please refer to JS options section
data-exit-duration	the duration, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'defaultExitDuration', will be used. Please refer to JS options section
data-exit-delay	the time delay, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'defaultExitDelay', will be used. Please refer to JS options section
data-exit-fade	exit fade value. Values from 0 to 1 *** If this parameter is not added, the value of JS parameter 'defaultExitFade', will be used. Please refer to JS options section
data-exit-easing	The easing for layer exit animation. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack *** If this parameter is not added, the value of JS parameter 'defaultExitEasing, will be used. Please refer to JS options section
data-exit-off	Possible values: true - the layer will not exit false - the layer will exit according to exit left, top, delay, duration and easing value *** If this parameter is not added, the value of JS parameter 'defaultExitOFF', will be used. Please refer to JS options section
data-exit-skew	the layer exit move skew value. Example: data-exit-skew="50deg,0deg" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp
data-exit-scale	the layer exit move scale value. Example: data-exit-scale="0" For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp

How To Use It As FullScreen Background

1. Set the following parameters:
setAsBg:true,
width: 1920,
height: 1200,
width100Proc:true,
height100Proc:true,

Example of usage:

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
setAsBg:true,
width: 1920,
height: 1200,
width100Proc:true,
height100Proc:true,
showNavArrows:true,
showBottomNav:true,
autoHideBottomNav:true,
thumbsWrapperMarginTop: -55,
pauseOnMouseOver:false
});

2. Just after <body> tag copy the slider code.

How To Disable Zoom In/Out Effect

To disable Zoom In/Out Effect just set JS parameters initialZoom and finalZoom to 1.

Example 1 (for the entire slider):
jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
width: 940,
height: 364,
initialZoom:1,
initialZoom:1,
duration:0,
durationIEfix:0
});

Example 2 (for the a particular slide):
<li data-initialZoom="1" data-finalZoom="1" data-duration"0" >html content1 here</li>

CSS Advices For Text Responsive Behavior

Always set the font size and line-height for a div just once. Don't set the the font size and line-height for an inner link or other inner element.

Correct way:

.textElement54_opportune {
font: 15px 'Droid Sans', Verdana, Helvetica, sans-serif;
line-height:21px;
text-transform:uppercase;
color:#ffffff;
}

.textElement54_opportune a {
color:#ffffff;
}

.textElement54_opportune a:hover {
color:#FF0000;
}

Wrong way:

.textElement54_opportune {
font: 15px 'Droid Sans', Verdana, Helvetica, sans-serif;
line-height:21px;
text-transform:uppercase;
color:#ffffff;
}

.textElement54_opportune a {
font: 16px Arial;
line-height:15px;
color:#ffffff;
}

.textElement54_opportune a:hover {
font: 18px Arial;
line-height:19px;
color:#FF0000;
}