Enfold > Portfolio Ajax > Change portfolio grid images on hover

Hey Ismael – wanted to let you know we were able to achieve it. PLUS – we love contributing to enfold so here are some tutorials for anyone interested in image switching.

This is a simple way to do a quick image switch. Great for something if you want to show before/after

If you simply want to switch between 2 images somewhere on your site, use the a code block element and add the following:

IMAGE 1 LINK" onmouseover="this.src='IMAGE 2 LINK'" onmouseout="this.src='IMAGE 1 LINK'"/>

If you want to edit your ajax portfolio featured images to switch on hover, do the following:

Step 1: Add the Dynamic Featured Image Plugin This will add a second featured image slot to your portfolio items.

Step 2: Copy the code from here and replace your portfolio.php contents with the code. NOTE: Make sure you create a backup of your old code first!! The affected lines of code are from lines 458 to 491.

Step 3: Add a new portfolio item and add the static image to the SECOND featured image. Add your hover image to the DEFAULT featured image spot.

This will cause the hover image switch. If you want your results to be similar to http://mosaixgroup.com/who-we-are make the following adjustments:

Use the 5 column setting in the ajax portfolio

CSS:

#top .portfolio-preview-image .avia-gallery-thumb img {
    display: none;
}

.portfolio-preview-content .avia-arrow {
    display: none!important;
}

.portfolio-preview-image {
    width: 35.6%;
}

.portfolio-preview-content {
    padding: 75px 100px 30px;
    width: 64.4%;
    background: #fff!important;
    line-height: 1.8em!important;
}

.portfolio_preview_container{
	box-shadow: none!important;
}

#top .grid-entry.no_margin.av_one_fifth {
padding: 10px;
}

Good Luck!