Joomla compatibility : Joomla 5 Joomla 4 Joomla 3

image effect joomla responsive caption

Image Effect CK adds some nice effects to your images. You can control which effect to show by adding a css class to any image of your website. The caption is automatically created from the title tag of the image.

 

 

 

Features

On any image into your website you can add the effect you want. You can choose to have different effects in the same page.

  • Applies to any image in the page
  • You can add the effect you want to each image
  • Responsive behavior
  • Animated caption that is automatically generated from the title tag of the image
  • No HTML knowledge required, just add the CSS class on the image
  • Possibility to add a link on the image
  • Create your own styles using the styling interface
  • Integrated with Page Builder CK
  • Compatible with Mediabox CK

Using Image Effect CK you don't have to wrap your image with some HTML tag or add any additional code, just set the CSS class and the title on your image and that's all !

 

Download Image Effect CK

image effects simple usage

Simple to use

No coding required, no need to worry about the code, just add the CSS class on your image. You can use your editor to add the CSS class of the desired effect on any image.

You can use any effect on any image without restriction. You can use it in the articles but also in any content in your website.

 

How to use it (Light version)

The only thing you have to do is to add the CSS class on your image. You can use your editor is it has the ability to set a class, or edit the source code to add the class manually to the image tag. The caption is automatically created from the title tag of the image. Example of image source code :

<img src="/images/yourimage.jpg" class="effectck-lily" title="My title::A little description" />

See the demo for the list of available classes and efects.

Note that you can set a title and desciption using the separator "::" into the title tag.

 

Editor button

Adding an effect to your images has never been so easy ! Use the Image Effect CK button in your editor to open the popup that shows you the list of effects. Click on the effect you want and that's it.

image effects editor button

 

How to use it (Pro version)

You can use the Pro version of Image Effect CK to help you to manage your effects. This will add the following features :

  • Add a button to your editor which opens a new window to manage your effect
  • Get the selected image and apply it the selected effect immediately
  • Allows you to add a title into the effect to your image
  • Allows you to add a descripion into the effect to your image
  • Direct rendering preview into the interface
  • Create your custom list of effects into a fast interface, including a direct preview

 

Editor button

imageeffectbutton editor

Edition popup

screenshot popup edition

 

 

 

74 effects preinstalled

You can use any of the 74 effects available with Image Effect CK just by adding the CSS class on your image. This will apply instantly without effort. You can also use the interface of the component to create your own effect, or combine your custom styling to any existing effect. Use them to add an amazing effect to your images.

See the effects

multiple image effects available

 

fusion page builder and image effect

Integrated with Page Builder CK

You can use Page Builder CK and Image Effect CK together to add amazing effects to your images !

Image Effect CK is directly integrated into the images options in the Page Builder interface.

Read More

 

Custom HTML

You can create your own HTML code to render the image with the effect, you are not limited to an image with a CSS class. If you use the HTML solution, you can adapt the code to your needs and add what you want, like social icons in the caption for example.

Read More

image effects custom html

 

image effects override

Override the effects

Create your own effects ! You can edit the available effect using an override technique, but you can also create your own list of effects. This way you can have custom css classes to use on your images and you can also limit the effect list to your own values.

Read More

 

Create some circles

Turning any image into a perfect circle has never been easier. Add the CSS class effectck-circle for a simple circle or effectck-circle-b for a circle with a border, and that's it !

If you want an animated circle effect, simply choose from one of the 39 effects listed in the demo below.

 

image effects override

 

Create amazing image effects for joomla! - Video

image effects video

Video timeline :

00:08 = Basic usage. Add a CSS class on your image to make it works
01:18 = Editor button. Use the integrated editor button to add the effect on any image easily and quickly
02:08 = Image gallery with Mediabox CK. USe Mediabox CK with Image Effect to create your images gallery in few click using the effect that you want on the images
04:17 = Easy integration with Page Builder CK. Create your content with the page builder for Joomla and insert your images without effort
06:45 = Advanced usage with custom HTML. If you are a designer, just create your own HTML code and add what you want in the image
08:52 = Create your own effects. Use the interface to create your own effect with a direct preview, without limit

 

 

Demo

joomla responsive image effect
effectck-lily
joomla responsive image effect
effectck-oscar
joomla responsive image effect
effectck-sadie
joomla responsive image effect
effectck-honey
joomla responsive image effect
effectck-layla
joomla responsive image effect
effectck-zoe
joomla responsive image effect
effectck-marley
joomla responsive image effect
effectck-ruby
joomla responsive image effect
effectck-roxy
joomla responsive image effect
effectck-bubba
joomla responsive image effect
effectck-romeo
joomla responsive image effect
effectck-dexter
joomla responsive image effect
effectck-sarah
joomla responsive image effect
effectck-chico
joomla responsive image effect
effectck-milo
joomla responsive image effect
effectck-julia
joomla responsive image effect
effectck-goliath
joomla responsive image effect
effectck-selena
joomla responsive image effect
effectck-apollo
joomla responsive image effect
effectck-steve
joomla responsive image effect
effectck-moses
joomla responsive image effect
effectck-jazz
joomla responsive image effect
effectck-ming
joomla responsive image effect
effectck-duke
joomla responsive image effect
fadeck
joomla responsive image effect
edafck
joomla responsive image effect
puffck
joomla responsive image effect
effectck-flip-left
joomla responsive image effect
effectck-flip-right
joomla responsive image effect
effectck-flip-top
joomla responsive image effect
effectck-flip-bottom
joomla responsive image effect
effectck-rollup-top
joomla responsive image effect
effectck-rollup-bottom
joomla responsive image effect
effectck-under
 

Demo with circle

joomla responsive image effect
effectck-circle
joomla responsive image effect
effectck-circle-b
joomla responsive image effect
effectck-circle-2
joomla responsive image effect
effectck-circle-3
joomla responsive image effect
effectck-circle-4
joomla responsive image effect
effectck-circle-5
joomla responsive image effect
effectck-circle-6
joomla responsive image effect
effectck-circle-7
joomla responsive image effect
effectck-circle-8
joomla responsive image effect
effectck-circle-9
joomla responsive image effect
effectck-circle-10
joomla responsive image effect
effectck-circle-11
joomla responsive image effect
effectck-circle-12
joomla responsive image effect
effectck-circle-13
joomla responsive image effect
effectck-circle-14
joomla responsive image effect
effectck-circle-15
joomla responsive image effect
effectck-circle-16
joomla responsive image effect
effectck-circle-17
joomla responsive image effect
effectck-circle-18
joomla responsive image effect
effectck-circle-19
joomla responsive image effect
effectck-circle-20
joomla responsive image effect
effectck-circle-21
joomla responsive image effect
effectck-circle-22
joomla responsive image effect
effectck-circle-23
joomla responsive image effect
effectck-circle-24
joomla responsive image effect
effectck-circle-25
joomla responsive image effect
effectck-circle-26
joomla responsive image effect
effectck-circle-27
joomla responsive image effect
effectck-circle-28
joomla responsive image effect
effectck-circle-29
joomla responsive image effect
effectck-circle-30
joomla responsive image effect
effectck-circle-31
joomla responsive image effect
effectck-circle-32
joomla responsive image effect
effectck-circle-33
joomla responsive image effect
effectck-circle-34
joomla responsive image effect
effectck-circle-35
joomla responsive image effect
effectck-circle-36
joomla responsive image effect
effectck-circle-37
joomla responsive image effect
effectck-circle-38
joomla responsive image effect
effectck-circle-39
 

 

Light version

27 effects preinstalled

Integrated into Page Builder CK

CSS Override

Compatible with Mediabox CK

Button editor

Custom list of effect

Styling / Design interface

Presets

Forum support

Use on multiple domains

1 Year updates

FREE

Pro version

27 effects preinstalled

Integrated into Page Builder CK

CSS Override

Compatible with Mediabox CK

Button editor

Custom list of effect

Styling / Design interface

Presets

Forum support

Use on multiple domains

1 Year updates

19 €

 

Vote for Image Effect CK in the JED

Read the documentation

 

Release notes (click to show) :


VERSION 2.4.2 - 17/04/24
  • Fix issue with interaction between items on touch device
VERSION 2.4.1 - 05/04/24
  • Add behavior to close the effect when touching outside (for touch/mobile device)
VERSION 2.4.0 - 27/12/23
  • Add Joomla 5 native compatibility (without the compatibility plugin)
  • Add compatibility of the effects with the touch devices
VERSION 2.3.7 - 22/08/22
  • Remove the Google Fonts call to be GDPR compliant
VERSION 2.3.6 - 02/07/22
  • Add the Under effect in the list of effects from the styling interface
VERSION 2.3.5 - 22/06/22
  • Fix issue with title and desc styles when using a circle effect
  • Fix issue with title and desc positioning with circle effects
  • Fix issue with cursor when using a link
VERSION 2.3.4 - 25/02/22
  • Fix issue with text transform style, update the buton to be none instead of inherit
  • Fix issue with cursor type pointer when no link on the image
  • Add css max-width on circle
VERSION 2.3.3 - 04/10/21
  • Fix issue with unwanted CSS rules on icons
VERSION 2.3.2 - 06/05/21
  • [Pro] Fix issue with image selection in the styles interface
VERSION 2.3.1 - 27/04/21
  • Add 2 new effects effectck-rollup-top and effectck-rollup-bottom
  • Add 1 new effect (without animation) effectck-under to have a caption under the image
  • Add 41 circle effects : effectck-circle to create a circle (without animation), effectck-circle-b to create a circle with border (without animation), and 39 other circle effects with animation inspired by http://gudh.github.io/ihover/dist/
  • [Pro] Add publish/unpublish actions for the styles
  • Fix zindex issue with the puffck effect
VERSION 2.3.0 - 01/02/21
  • Add compatibility with Joomla 4
  • Add compatibility with PHP 8
VERSION 2.2.10 - 15/09/20
  • Add compatibility with Watchful update
VERSION 2.2.9 - 28/04/20
  • Fix image height issue when using Mediabox CK in gallery mode
VERSION 2.2.8 - 14/04/20
  • Improve the CSS to make the flip effects compatible with Mediabox CK and Page Builder CK
VERSION 2.2.7 - 08/04/20
  • Add effects : flip-left, flip-right, flip-top, flip-bottom
VERSION 2.2.6 - 10/02/20
  • Fix issue with SQL table not correctly created
VERSION 2.2.5 - 02/01/20
  • Fix issue with version numbering different from the plugin
VERSION 2.1.1 - 13/11/19
  • Fix issue with Mediabox CK on mobile device
  • Create Light/Pro versions and remove Params
VERSION 2.1.0 - 10/02/19
  • Add new feature to select an existing effect to use with the custom styles
  • Add message if system plugin is missing
VERSION 2.0.4 - 18/11/18
  • Improve the CSS to be more flexible and work with the gallery addon from Page Builder CK
VERSION 2.0.3 - 06/11/18
  • Fix issue with admin page of the component not loading
VERSION 2.0.2 - 01/03/18
  • Fix issue with rendering in the popup within the editor
  • Fix issue with options layout
VERSION 2.0.1 - 04/12/17
  • New options for image overlay color
  • New effect options for all elements
  • Improve the custom effect list loading to be compatible with Page Builder CK
  • Add wrapper to the image in the generated html code, to get better effects
VERSION 2.0.0 - 16/10/17
  • New version with a new styling interface
  • New Possibility to override the css file in the template
  • New feature to create custom styles with a JSON file and style them in the CSS file
  • New feature to limit the effect list to the custom list

 

Fast and powerful creation, customizable and responsive.

Read More

Favorites extensions

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449

Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline