Whats in this Video
- Add section with two columns
- Add contain sections in first column and images in second column
- Add required class and id to sections and images
- Add custom code to work hover effect
Code
<style>
/*Default*/
.ele_images,.ele_desc{
display: none;
}
.hoversection{
opacity: 0.7;
border-radius: 10px;
cursor: pointer;
}
/*On Hover*/
.ele_images.active{
display: block;
}
.hoversection.active{
opacity: 1;
background: #E5EFF7;
}
.hoversection.active .ele_desc{
display: block;
}
</style>
<script>
jQuery(document).ready(function($){
$(".hoversection").hover(function(){
var sid = $(this).attr("id");
/*For Content*/
$(".hoversection").removeClass("active");
$(this).addClass("active");
/*For Images*/
$(".ele_images").removeClass("active");
$("."+sid).addClass("active");
})
})
</script>
