Hover effect on column and/or element

[Web_Services]

Hi, I’m building a testimonials section and am wondering how to create a hover effect when a user’s mouse is over a column and/or element.

Hoping to change background color and bring to forefront upon hover.

This is for swingeducation.dreamhosters.com running a child X theme.

This is roughly the idea:

[Prasant]

Hello @Web_Services,

Thanks for asking.

First I suggest you to assign a class to the section that’s holding testimonial content under Customize > Class. After that we are going to write few CSS codes that will change the background color on hover. To help you get started I have recorded a screencast. Please take a look. https://cloudup.com/cOOqXSTlVNi

Here is the CSS code that you can add under X > Theme Options > CSS:

.custom-section-class .x-column:hover {
    background-color: #d08c8c;
}
.custom-section-class .x-column{
min-height: 490px;
}

Please change the class name custom-section-class as per your requirement.

Hope that helps you to get started.

Thanks.

[Web_Services]

Thanks! That worked for the background color.

This is what i came up with (towards bottom of page): http://www.swingeducation.dreamhosters.com/districts/

Is there a way to make hover trigger that column to enlarge & other two columns shrink?

[Prasant]

Hello @Web_Services,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

.custom-section-class .x-column:hover {
    background-color: #65A0D8;
    zoom: 1.1;
}

Thanks.