Mouse Wheel Over effect create issue with two different width and height.
Please check this link http://cashmoney-records.umg-wp-stag...nfo/birdman-2/
Here, Two different sizes (width and height) images
Album and Single images have 195 x 195 px
and Videos image have 238 x 137 px
we are looking for the question we asked, as we have issue with mouse hover effect on two different sizes of thumbnails, can you please look in to the a we wrote with the link we given, so that you can get a complete picture and suggest us a best solutions, Every one will be appreciated for their support in this regards, Thanks
How can we use mouse wheel over effect with these two different size at a time on single.php please check script
<- Html (single.php) >
<span class="slider-th">
<span class="client-th captionfull">
<span class="rimage">
<a href="#inline_demo2<?php echo $counterv;?>" id="videos" rel="prettyPhoto[inline]" class="bsi">
<?php echo types_render_field('image-for-video-page', array('title' => get_the_title(), 'size' => 'videod', 'alt' => ' ', 'proportional' => true)); ?>
</a>
</span><! rimage >
<span class="cover boxcaption">
<h5><a href="#inline_demo2<?php echo $counterv;?>" id="videos" rel="prettyPhoto[inline]" class="bsi"> <?php echo the_title(); ?></a></h5>
<p><a href="#inline_demo2<?php echo $counterv;?>" id="videos" rel="prettyPhoto[inline]" class="bsi"> Watch Video</a></p>
</span><!cover boxcaption >
</span><!Client Thumb Ends>
<span class="clr"></span
</span><! slider th >
< Script and CSS (single.php) >
<!mouse wheel >
<script type="text/javascript">
$(document).ready(function(){
$('.client-th.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'0'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'195px'},{queue:false,duration:160});
});
});
</script>
<! mouse wheel >
<style>
.slider-th .client-th {width:195px; height:195px; float:left; position:relative; margin:0 0 0 0; overflow:hidden; border:#0F0 soldi 1px; }
.sliderclient .boxcaption {position: absolute; background:#b50000; height:0; width:100%;
/* For IE 5-7 */
filter: progid XImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid XImageTransform.Microsoft.Alpha(Opacity=80)";
z-index:-3;
}
.slider-th .boxcaption {position: absolute; background:#b40000; height:196px; width:100%; opacity: .8;
/* For IE 5-7 */
filter: progid XImageTransform.Microsoft.Alpha(Opacity=90);
/* For IE 8 */
-MS-filter: "progid XImageTransform.Microsoft.Alpha(Opacity=80)";
z-index:1;
}
.slider-th .boxcaption h5 a {margin:34px 0 0 10px; float:left; font: 13px "rockeb";
color:#f4f4f4;
text-decoration:none;
text-transform:uppercase;
width:170px;
height:auto;
text-align:center;
}
.slider-th .boxcaption p a {margin:0 0 0 0; float:left; color:#fff; font: bolder 20px "rockwelllight"; width:195px; font-weight:bold; text-align:center; text-decoration:none;}
.slider-th .captionfull .boxcaption {
top: 355px;
left: 0;
}
</style>
How can we apply this html and script with 238 x 137 px on same page single.php????
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks