'Image Plus' add-on for concrete5

This extension for concrete5 will let you add nice CSS3 style animations to your images. More than 15 different 2D and 3D effects are included !!

When you link the image to another page, you can get a preview of it right below your block ! This makes it a great tool to create a gallery for a portfolio.

So... let's just see what this is all about!

Blogs
May 23, 2016, 12:00 PM
May 21, 2016, 9:28 AM
Mar 1, 2016, 7:06 PM
Dec 7, 2015, 4:08 PM

Example 1

Image Plus

Effect 11

Here's some text.

Open Link
Read More
Close Page View

Hover the mouse over the image, or tap on it on a touchscreen. You will get the 'garage door' effect.

Click on the 'Read More' button and a preview of the linked page will open below.

The preview will show the content of the 'main' area. To show the full page, just open the link with the 'open link' button.

Available effects

'Image plus' comes standard with more than 15 effects. They are listed here below.

They all have the same image, a 2nd image on hover, and a different (transparent) mask.

Effect 1

Effect 1

Zoom-in - Delayed scroll

Open Link
Read More
Close Page View
Effect 2

Effect 2

Rotated Mask - Delayed scroll

Open Link
Read More
Close Page View
Effect 3

Effect 3

Rotated Mask - Rotated info

Open Link
Read More
Close Page View

Effect 4

Effect 4

Zoom-out - Rotated + zoom-in info

Open Link
Read More
Close Page View
Effect 5

Effect 5

Scroll-right

Open Link
Read More
Close Page View
Effect 6

Effect 6

Zoom-out info

Open Link
Read More
Close Page View

Effect 7

Effect 7

Vortex-out - Vortex in/scroll-down

Open Link
Read More
Close Page View
Effect 8

Effect 8

Scroll-down with bounce

Open Link
Read More
Close Page View
Effect 9

Effect 9

Cover from left and bottom - turn in Info

Open Link
Read More
Close Page View

Effect 10

Effect 10

Zoom-in + fade-out image - Zoom-in, fade-in info

Open Link
Read More
Close Page View
Effect 11

Effect 11

Garage door

Open Link
Read More
Close Page View
Effect 12

Effect 12

Flip 3D - 1

Open Link
Read More
Close Page View

Effect 13

Effect 13

Flip 3D - 2

Open Link
Read More
Close Page View
Effect 14

Effect 14

Flip 3D - 3

Open Link
Read More
Close Page View
Effect 15

Effect 15

Flip 3D - 4

Open Link
Read More
Close Page View

Adapt CSS rules

Although there are many predefined effects, it is also possible to tweak them to your own needs. This would take some knowledge of CSS and HTML.

There are a few ways to change CSS styles on an 'Image plus' block:

That last one is what I also did on this page. Therefore I created a simple HTML block as shown next.

'Image plus' has also a custom effect prepared. You can create your own CSS rules for the following class:

.ip_view_-1

HTML-block:

<style>
div.ccm-page .image_plus h2 {
color: green;
}
</style>

Templates

'Image plus' is shipped with an example template.

You can apply it to an image_plus block through the 'design and templates' menu.

This example template does the following:

  • it tilts the image_plus randomly
  • it sets a border
  • it slows down the animation on the 'garage door' effect (11)


Add a custom template
Image Plus

Effect 11

Here's some text.

Open Link
Read More
Close Page View
Effect 0

Effect 0

No special effect, normal behaviour. With example template

Open Link
Read More
Close Page View

Effect 13

Effect 13

With example template

Open Link
Read More
Close Page View
Image Plus

Effect 13

Here's some text.

Open Link
Read More
Close Page View

Screenshots

Editing the 'Image Plus' block is easy. You can see all the tabs and options in the following screenshots. The '?' will provide extra info if needed.