Different Image Hover Example With Custom CSS

The plugin itself doesn’t have an option to have a different image display when the user hovers the member entry. However, with some CSS and preparing the images before, this is possible.

Image Settings

To achieve this, we prepare the member image to have both hover states in the same image file. Like the image below, making sure the settings have the correct size, in this case width:160, heigh:320, crop:no.

hover_effect

Examples

Grid Layout

Private: Mary Hover
Another Example
Add the following to the custom CSS field in the settings:
.tshowcase-box-photo {
overflow:hidden;
height:160px;
}
.tshowcase-box-photo img:hover {
margin-top:-160px;
}

Hover Layout

Private: Mary Hover
Private: Mary Hover
Another Example
Add the following to the custom CSS field in the settings:
.tshowcase-hover-box {
overflow:hidden;
height:160px;
}
.tshowcase-hover-box:hover img {
margin-top:-160px;
}

Extra css needed for circle images:

.ts-circle img { border-radius:0px !important; }
.ts-circle { height:160px; width:160px;  }

Pager Layout

The pager layout thumbnails require some extra work to look good.
The first thing is to go into your general wordpress settings page > Media options, and disable the ‘crop’ feature for images.
Then, on the team showcase settings page, have the image size for the thumbnails be twice as the image size you will apply (basically, set the real image size proportion). For example, if you will use a 50×100 image and will make it 50×50, use the 50×100 in the plugin settings page and the 50×50 in the css code. after applying this settings you can upload your image.
Also, it will work better with the pager layout without the image borders.

Add the following to the custom CSS field in the settings:
.tshowcase-pager-thumbnail {
overflow:hidden;
height:50px; //set image width and height
width:50px;
}

.tshowcase-pager-thumbnail img:hover {
margin-top:-50px;
}