CreativeDive supports this item


This author's response time can be up to 5 business days.

8 comments found.

Nice Work! can it have headline, text and LINK???

hey pharill,

in the live-preview, you can see the headline and text on mouseover the images. You can add easily a link to the image or text only.

This is cool! Is there a way to resize it? Also, is there a way to have one image already expanded when the page opens? Thanks!!

Hi joslen, yes it is possible. But I must change so many things, that I can’t longer publish in this package. I’ll give you a notice when the new download is available.

The new css accordion with expanded images (on click) is now available:

I’ve got the code working and showing the first image as expanded when I first laod the page but then I need to click to open the next…

How do I expand the first image and then still have the hover ability?

I’ve made some small edts to the base.. but if you look here

It’s perfect for now but I’d like the top image to act like it has hover when the page loads… then if the person leaves the div the top must go to hover again..

Does that make sense?

Try this, so the first image ist expanded on start:

Expample for 2 Images


<div class="image-acc img-2 vertical">
                    <div class="image-acc-inner">
                        <div class="image test"><img src="images/1.jpg" /></div>
                        <div class="image test2" style="height:1000px"><img src="images/2.jpg" /></div>


/* IMG 2 */
.img-2.vertical .image.test {height:300px}
.img-2.vertical .image-acc-inner:hover .image {height:89px!important}
.img-2.vertical .image.test:hover ~ div {height:300px!important}
.img-2.vertical .image.test2:hover {height:300px!important}
.img-2.vertical .image:hover {height:300px!important}

Expample for 3 Images


<div class="image-acc img-3 vertical">
                    <div class="image-acc-inner">
                        <div class="image test"><img src="images/1.jpg" /></div>
                        <div class="image test2"><img src="images/2.jpg" /></div>
                        <div class="image test3" style="height:1000px"><img src="images/3.jpg" /></div>


/* IMG 3 */
.img-3.vertical .image.test {height:300px}
.img-3.vertical .image-acc-inner:hover .image {height:43px}
.img-3.vertical .image.test:hover ~ div {height:43px!important}
.img-3.vertical .image.test2 {height:43px!important}
.img-3.vertical .image.test2:hover {height:300px!important}
.img-3.vertical .image.test3 {height:43px!important}
.img-3.vertical .image.test3:hover {height:300px!important}
.img-3.vertical .image:hover {height:300px!important}

Thanks that got it working as I liked :)

ist it responsive?

hey, it ist not responsive, but you can set the container width to 100% an the image max-width to 100% ... so it works better responsive

hi wootimes, I think you mixed up “vertical” and “horizontal” in your html documentation.

The mentioned html in the documentation is not working unless you replace with

Otherwise nice functionality:) cheers Twin

Thanks for the note, I will fix this :)

can I use this with wordpress?

Hi lizardking, you can use it anywhere. But this is no Plugin. You can insert the html and CSS manually in the Template Code.


I have an issue with your code, could you check that ?

It’s on this page :, when you put the mouse on the last image of the accordion it becomes creasy !

Thank you !


have you try it with this:

<div class="image-acc img-6 vertical content type1">...</div>

instead of this:

<div class="image-acc img-3 vertical content type1">...</div>

Because you use the “img-3” class for six containers.

Hello, Well, it’s the same thing :( If you put the mouse on the right bottom corner of the last picture you can see the issue. Thank you in advance, if the code is OK it save my life !

You can’t get a flexible height like “100%“ to the “image-acc” div. Change the div height to a fixed height like “800px“.

But you can add flexible heights to the inner divs like this:

.img-6.vertical .image-acc-inner:hover .image {height:12%}
.img-6.vertical .image {height:16.6666%}
.img-6.vertical .image:hover {height:40%!important}


I have a small issue with your code here :

All works very fine on all navigators except on internet explorer, i have small bugs. Can you help me ?

found ! problem was transition !

Hey, you have customized the image accordion. E.g. the outside container can’t have a variable height like 100%. Therefore it can happens that the accordion have functionality issues. For customized code, I can’t give support. Only for the original html and css values. With CSS and HTML you can have many different cases, thats the reason. I’m glad, that your issue is solved now :-)