Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 28/08/2023 CalendARI v. 1.3.0 supports Joomla! 4.x/PHP 8.x

    CalendARI is a Joomla! events manager component and now It is compatible with Joomla! 4.x.

  • 19/08/2023 ARI Quiz 3.10.0 with Joomla! 4 support

    Joomla! quiz extension with J! 3.x/4.x and PHP 8.x support.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Carousel Style question
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: Carousel Style question
#60960
Carousel Style question 6 Years, 1 Month ago Karma: 0
Hi There, I would like the images in the rear of the carousel (ie. all images except for the front main image) to have a slight opacity so that they seem to fade into the background. Is there a styling or adjustment to code that I could do to enable this.
Thanks!!
The administrator has disabled public write access.
 
#60965
Re:Carousel Style question 6 Years, 1 Month ago Karma: 741
Hello,

Add the following CSS rule to "CSS Styles" parameter in module settings:

.ari-cloud-carousel IMG:not(.active) {opacity:0.3}

Regards,
ARI Soft
The administrator has disabled public write access.
 
#60968
Re:Carousel Style question 6 Years, 1 Month ago Karma: 0
This solved the problem, thank you

I worked it out a different way, but your's is far neater. I did mine like this:

img.cloudcarousel {

-webkit-filter: grayscale(20%)
brightness(60%)
contrast(100%);
filter: grayscale(20%)
brightness(60%)
contrast(100%);

transition: filter 0.3s;
-webkit-transition: filter 0.3s, -webkit-filter 0.3s;
}
img.cloudcarousel.active {

opacity: 1;
box-shadow: none;
-webkit-filter:none;

transition: none;
-webkit-transition: none;
}
The administrator has disabled public write access.
 
Go to topPage: 1