0
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum

We are here to serve :)

Our support team is currently online to solve your issues.

Our support team is currently offline

Our support heroes might not be around this hour. Please expect some delays.

Our support is available from

Monday - Friday 8am - 5:30pm GMT+7

Your time: 00:00:00
Our time: 00:00:00

Welcome, Guest
User guides, update and bug fixes
  • Page:
  • 1

TOPIC: Image Hover Effects

Image Hover Effects 6 years 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 6 years ago #14927

Dear zen,

Please send the screenshots to us if possible.

Thanks!

Re: Image Hover Effects 6 years 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 6 years 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 5 years, 12 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 5 years, 12 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.42 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.

Suggested Posts

(/)
Result not found!

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
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes