Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum
Welcome, Guest
User guides, update and bug fixes
  • Page:
  • 1

TOPIC: Image Hover Effects

Image Hover Effects 10 years, 4 months ago #14859

Where would I be able to change / disable effects on the image hover?

As far as I could find, there are zoom and flashing effects, but I cannot find any place to change them.

Re: Image Hover Effects 10 years, 4 months ago #14927

Dear zen,

Please send the screenshots to us if possible.

Thanks!

Re: Image Hover Effects 10 years, 4 months ago #14955

I cannot really describe it by screenshot, but the easiest way is to check it in your Decou demo.

1. Home page panels in position-0 - when you mouseover the images in the popup panels, the images zoom

2. On any other default pages - banner position - when you mouseover the banner image, the flashing (or lightning) effect occurs.

Re: Image Hover Effects 10 years, 4 months ago #14993

Dear zen,

Please go to your_site/templates/sj_decou/css/template-blue.css and:

1. find:
div.block_program div.item .item-top .item-img img {
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
div.block_program div.item .item-top .item-img a:hover img {
  -webkit-transform: scale(1.3,1.3);
  -moz-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  transform: scale(1.3,1.3);
}


=>

/*div.block_program div.item .item-top .item-img img {
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
div.block_program div.item .item-top .item-img a:hover img {
  -webkit-transform: scale(1.3,1.3);
  -moz-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  transform: scale(1.3,1.3);
}*/


2. and find:
.banneritem:before {
  box-shadow: 0 0 100px 50px #FFFFFF;
  content: "";
  display: block;
  height: 0;
  left: -20%;
  position: absolute;
  top: 120%;
  transition: all 0.5s ease-in 0s;
  width: 0;
}
.banneritem:hover:before {
  box-shadow: 0 0 100px 50px #FFFFFF;
  left: 120%;
  top: -20%;
}


=>

/*.banneritem:before {
  box-shadow: 0 0 100px 50px #FFFFFF;
  content: "";
  display: block;
  height: 0;
  left: -20%;
  position: absolute;
  top: 120%;
  transition: all 0.5s ease-in 0s;
  width: 0;
}
.banneritem:hover:before {
  box-shadow: 0 0 100px 50px #FFFFFF;
  left: 120%;
  top: -20%;
}*/


Thanks!

Re: Image Hover Effects 10 years, 4 months ago #15010

Thanks for the info.

Is there a list of different hover effects I can see and choose to use? I could not find it in the Decou documentation.

Re: Image Hover Effects 10 years, 4 months ago #15067

Dear zen,

Please refer detail to the code in template-blue.css file. we don't have guide for this.

Thanks!
  • Page:
  • 1
Time to create page: 0.29 seconds

Notification

Please find your issue via Suggested Posts before submitting your question. We have solved the most of issues and maybe your issue was solved before.

Latest My Topics

No posts to display.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes