How to remove the hover effect from property unit card

How to Remove or Edit Card Hover Effects With Custom CSS

You can use custom CSS to change or remove the hover effects used on property cards, agent cards, blog cards, featured properties, and similar theme elements.

Before adding custom CSS, we recommend using a child theme or adding the CSS in:

Appearance > Customize > Additional CSS
The style.css file from your child theme

Remove the Image Zoom Effect on Hover

Use this CSS if you want to remove the zoom-in effect from images when hovering over property cards, agent cards, widgets, or featured property sections.

.agent-unit-img-wrapper:hover img,
.widget_latest_internal:hover img,
.featured_widget_image:hover img,
.property_listing:hover .listing-unit-img-wrapper img,
.property_listing:hover .property_unit_custom_element.image img {
  opacity: 1 !important;
  transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
}

.featured_property.featured_property_type1:hover .carousel-inner,
.featured_property.featured_property_type2:hover .carousel-inner,
.featured_property.featured_property_type3:hover .carousel-inner,
.featured_property.featured_property_type3:hover .feat_img {
  transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
}

If you want to keep the slight opacity change on hover, replace opacity: 1 !important; with your preferred opacity value, for example opacity: 0.8 !important;.

Remove the Card Moving Up Effect on Hover

Use this CSS if you want to stop cards from moving upward when hovering over them.

.blog_unit:hover,
.property_listing:hover,
.agency_unit:hover,
.agent_unit:hover,
.user_role_unit:hover {
  transform: translate(0, 0) !important;
}

Remove the Card Moving Up Effect and Keep the Hover Shadow

If you want to remove only the movement but keep a hover shadow, use this CSS instead:

.blog_unit:hover,
.property_listing:hover,
.agency_unit:hover,
.agent_unit:hover,
.user_role_unit:hover {
  box-shadow: 0 3px 23px 9px rgba(7, 152, 255, 0.15) !important;
  transform: translate(0, 0) !important;
}

Edit the Default Card Shadow Design

Use this CSS if you want to customize the shadow used on cards and content boxes.

.adv-search-3,
.page-template-front_property_submit .navigation_container,
.advanced_search_shortcode,
.membership_package_product,
.contact-wrapper,
.developer_contact_wrapper,
.agency_contact_wrapper,
.property_reviews_wrapper,
.agency_contact_container_wrapper,
.agency_content_wrapper,
.submit_property_front_wrapper,
.directory_sidebar_wrapper,
.places_wrapper_type_2,
.featured_property,
.agency_unit,
#comments,
.single-blog,
#content_container .container_agent,
.listing_wrapper .property_listing,
.listing_wrapper .agent_unit,
.tab-pane,
.nav.nav-tabs,
.agent_contanct_form,
.agent_content,
.wpestate_agent_details_wrapper,
.wpestate_property_description,
.multi_units_wrapper,
.property-panel,
#primary .widget-container,
.user_role_unit,
.testimonial-slider-container .testimonial-container.type_class_3,
.estate_places_slider.slick-initialized.slick-slider,
.google_map_shortcode_wrapper,
.testimonial-container.type_class_1 .testimonial-text,
.blog_unit,
.agent_unit_featured,
.featured_article {
  box-shadow: 0 10px 31px 0 rgba(25, 80, 69, 0.09);
}

.blog_unit:hover,
.property_listing:hover,
.agency_unit:hover,
.agent_unit:hover,
.user_role_unit:hover {
  box-shadow: 0 3px 23px 9px rgba(25, 80, 69, 0.15) !important;
}

Important Notes

Add only the CSS section you need. You do not have to add all examples unless you want to change all these effects.

After adding custom CSS, clear your website cache, server cache, CDN cache if used, and browser cache.