CreativeDive

CreativeDive supports this item

Supported

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

6 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: http://codecanyon.net/item/pure-css-vertical-image-accordion-expanded-on-cl/7582887

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 http://197.242.148.251/~bedrooms/review/wildstar-review-welcome-to-nexus-cupcake/

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

HTML


<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>
                    </div>
                </div>

CSS


/* 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

HTML


<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>
                    </div>
                </div>

CSS


/* 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.

by
by
by
by
by
by