04 Oct 2010 06:51

04 Oct 2010 06:51

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

Below I've added some CSS3 awesomeness to the inbuilt wikidot lightbox image gallery - you catch the code below the thumbnails.

Here's the code

+ show the CSS

/** Lightbox **/
.gallery-box {
    padding: 20px;
}
.gallery-item.thumbnail {
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eef1f1));
    background-image: -moz-linear-gradient(top,#fff, #eef1f1);
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
}
.gallery-item.thumbnail table tbody tr td {
    border: none !important;
}
.gallery-item.thumbnail:hover {
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.18);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.18);
    box-shadow: 0 0 7px rgba(0,0,0,0.18);
    -webkit-transform: scale(1.15) rotate(-3deg);
    -moz-transform: scale(1.15) rotate(-3deg);
}
.gallery-item.thumbnail:hover:nth-child(odd) {
    -webkit-transform: scale(1.2) rotate(3deg);
    -moz-transform: scale(1.2) rotate(3deg);
}
#lightbox-container-image-box {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.8);
    box-shadow: 0 0 7px rgba(0,0,0,0.8);
    position: relative;
    z-index: 20;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eef1f9));
    background-image: -moz-linear-gradient(top,#fff, #eef1f9);
}
#lightbox-container-image-data-box {
    padding-top: 10px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fefef1));
    background-image: -moz-linear-gradient(top,#fff, #eef1f1);
    position: relative;
    z-index: 10;
    top: -45px;
    opacity: 0;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
#jquery-lightbox:hover #lightbox-container-image-data-box {
    top: -5px;
    opacity: 1;
}
a#lightbox-nav-btnPrev, a#lightbox-nav-btnNext {
    opacity: 0;
    -webkit-transition: opacity 600ms ease;
    -moz-transition: opacity 600ms ease;
}
a#lightbox-nav-btnPrev:hover, a#lightbox-nav-btnNext:hover {
    opacity: 1;
}
a#lightbox-secNav-btnClose {
    border-bottom: 7px solid transparent;
    padding-bottom: 0;
    -webkit-transition: border-color 300ms ease;
    -moz-transition: border-color 300ms ease;
}
a#lightbox-secNav-btnClose:hover {
    border-bottom: 7px solid #39c;
}

With less than 6 weeks to go until another year of study is complete, I hope to bring you some more insightful posts in the near future. Until then, keep on keeping on.

Enjoy the article? Tweet it!

tags — gallery gradient image transform transition

Discussion - No comments yet…5 comments

tsangk 04 Oct 2010 07:12

WOW! Excellent!

---

Kenneth Tsang (@jxeeno)

tsangk 04 Oct 2010 07:24

Bryce… is it possible to display certain messages to CSS3 capable browsers using CSS-only?

---

Kenneth Tsang (@jxeeno)

bcammo 04 Oct 2010 07:46

What sort of messages?

---

BMC Creative | RoaringApps | @brycecammo

tsangk 04 Oct 2010 07:51

A note saying that certain features are only available if you download Google Chrome or Apple Safari

---

Kenneth Tsang (@jxeeno)

bcammo 04 Oct 2010 08:13

Well you can use :after with content like this:

.div:after {
      content: "This will appear after the div";
}

However, only newer browsers will understand that, which kind of defeats the purpose of saying 'you need to upgrade your browser'.
I can't think of a way to show that sort of message to older browsers and not new ones without javascript.

---

BMC Creative | RoaringApps | @brycecammo

Post preview:

Close preview

	or Sign in as Wikidot user
	(will not be published)

- +

Help: wiki text quick reference