July 4, 2014

Weebly Tricks #60 - Responsive Image Accordion CSS3

Posted by Domz at 7/04/2014

Weebly Image Accordion CSS3


No worry about JavaScript because we will be using only CSS3 this time for our beautiful image accordion widget made by Ring Wang. Showcase your photos (up to 8) on one accordion, added with simple animation revealing text for each image. This tutorial requires basic math and I believed you can follow. Keep learning co'z in the end, its for you and your site.








You may resize your screen while on the demo to test its responsiveness. We will not create an external file this time.

HEADER CODE
Where to place these codes? Click Here!

<style>
.ia-container {
width: 650px;
margin: 20px auto;
overflow: hidden;
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
border: 7px solid #C2BDBD;
}

.ia-container figure {
    position: absolute;
top: 0;
left: 50px; /* width of visible piece */
width: 300px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

.ia-container > figure {
    position: relative;
left: 0 !important;
}

.ia-container img {
display: block;
width: 100%;
}

.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px; /* just cover visible part */
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
left: 300px;
}

.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}

.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
opacity: 1;

top: 50%;
}

.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}

.ia-container input:checked ~ figure input{
    z-index: 1;
}

@media screen and (max-width: 720px) {
    .ia-container {
width: 540px;
}

.ia-container figure {
left: 40px;
width: 260px;
}

.ia-container input {
width: 40px;
}

.ia-container input:checked ~ figure {
left: 260px;
}

.ia-container figcaption span {
font-size: 16px;
}
}

@media screen and (max-width: 520px) {
    .ia-container {
width: 320px;
}

.ia-container figure {
left: 20px;
width: 180px;
}

.ia-container input {
width: 20px;
}

.ia-container input:checked ~ figure {
left: 180px;
}

.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}

}
</style>

Notes:
Red text - This is your accordion width. Change it using the following formula: (No. of imagess - 1) * width of visible piece + your image width. So in my case I have (8-1)*50+300=650. Easy right?
Green text - Change with your preferred width of visible piece.
Blue text - The width of the images you used. Make sure all your photos has the same width.



BODY CODE
Where to place these codes? Click Here!

<div class="ia-container">    
    <figure>
        <img src="http://mwtdatabase.weebly.com/files/theme/image1.jpg" alt="image01" />
        <input type="radio" name="radio-set" checked="checked" />
        <figcaption><a href="http://www.myweeblytricks.com/2014/07/weebly-tricks-59-7-awesome-circle-hover.html"><span>Circle Hover Effects</span></a></figcaption>
       
        <figure>
            <img src="http://mwtdatabase.weebly.com/files/theme/image2.jpg"alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Action Buttons</span></figcaption>
           
            <figure>
                <img src="http://mwtdatabase.weebly.com/files/theme/image3.jpg" alt="image03" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Download Buttons</span></figcaption>
               
                <figure>
                    <img src="http://mwtdatabase.weebly.com/files/theme/image4.jpg" alt="image04" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Image Hover Effects</span></figcaption>
                   
                    <figure>
                        <img src="http://mwtdatabase.weebly.com/files/theme/image5.jpg" alt="image05" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Featured Image Zoomer</span></figcaption>
                       
                        <figure>
                            <img src="http://mwtdatabase.weebly.com/files/theme/image6.jpg" alt="image06" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Card Deck Slideshow</span></figcaption>
               
                            <figure>
                                <img src="http://mwtdatabase.weebly.com/files/theme/image7.jpg" alt="image07" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Custom Search Engine</span></figcaption>                                  

                                <figure>
                                    <img src="http://mwtdatabase.weebly.com/files/theme/image8.jpg" alt="image08" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Slide Footer</span></figcaption>
                                </figure>
                               
                            </figure>
               
                        </figure>
                           
                    </figure>
                       
                </figure>
                   
            </figure>
           
        </figure>
       
    </figure>
   
</div>

Notes:
Green text - These are your image sources. I used 8 images so there are 8 image link sources.
Yellow text - These will be your text strings for each images.
Blue text - The alt text or description for your images. This is will not be visible, just for search engine.
Red text - You can actually insert a link to the text string just like what I inserted on the first image.



CONCLUSION

Today we learned about making widgets responsive (atleast). This image accordion comes sweeter depending on the images you will use. Any questions, suggestions or you need an assistance, just post below or in our forum. Goodluck and I will be glad if you can follow.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

3 comments:

  1. IS THE TEXT CLICKABLE? Can the text be hyperlinked?

    ReplyDelete
    Replies
    1. Yup, on the body code above, follow the line highlighted in red.

      Delete
  2. Looks great but unfortunately I can't seem to change the text string

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top