Overlay an image over another image

Description

This code will allow you to put an image over another image such as a gray-scale and color image. JQuery will fade the images in. In order for it to work there must be WordPress custom field called “Thumbnail Overlay” and another called “Thumbnail” also make sure thumb.php is active in the directory and follows the correct path to […]

This code will allow you to put an image over another image such as a gray-scale and color image. JQuery will fade the images in. In order for it to work there must be WordPress custom field called “Thumbnail Overlay” and another called “Thumbnail” also make sure thumb.php is active in the directory and follows the correct path to the images

HTML Source Code

                        
                          <!-- Post Starts -->    
<?php
query_posts('cat=4&posts_per_page=5&orderby=title&order=asc'); // query to show all posts independent from what is in the center;
if (have_posts()) :
   while (have_posts()) :the_post(); ?>
   
 

<!--Box sliders Start-->   

 <li>
<a class="image"  href="<?php $values = get_post_custom_values("url"); echo ($values[0] ? $values[0] : "" ); ?>" target="_blank">
	<span class="roll" ><img src="/wp-content/themes/aiog5/thumb.php?src=<?php $values = get_post_custom_values("Thumbnail Overlay"); echo ($values[0] ? $values[0] : "" ); ?>&w=246&h=300&zc=1&q=200" alt="<?php the_title(); ?>"></span>
	<img src="/wp-content/themes/aiog5/thumb.php?src=<?php $values = get_post_custom_values("Thumbnail"); echo ($values[0] ? $values[0] : "" ); ?>&w=246&h=300&zc=1&q=200" alt="<?php the_title(); ?>">
</a>
</li>
 <!--Box sliders End-->    
   

<?php  endwhile;
endif;
wp_reset_query();
?>

<!-- Post Ends -->

CSS Source Code

                        
                          /*Overlay Image Start*/	
.image {
    float: left;
    height: 300px;
    overflow: hidden;
    position: relative;
    width: 246px;
}

.image h2 {
    float: left;
    height: 42px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 237px;
    width: 194px;
}

.image h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   /*background: rgb(0, 0, 0); /* fallback color */
  /* background: rgba(0, 0, 0, 0.7);*/
   padding: 10px; 
}


#section2 li {
    border: 3px solid #F2B8A0;
    float: left;
    height: 300px;
    list-style: none outside none;
    margin-right: 20px;
    margin-top: 34px;
    overflow: visible;
    position: relative;
    width: 246px;
    z-index: 999999;
}


span.roll {
    background: url("/images/mag.png") no-repeat scroll center center #CC502F;
    color: #E0E5CA;
    font-style: italic;
    font-weight: lighter;
    height: 296px;
    position: absolute;
    text-transform: lowercase;
    width: 241px;
    z-index: 10;
}
/*Overlay Image End*/

JavaScript Code

                        
                          <script type="text/javascript">
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");
 
// ON MOUSE OVER
$(".roll").hover(function () {
 
// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},
 
// ON MOUSE OUT
function () {
 
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
</script>


Post Categories

Tags