In this tutorial, we are going to show you, creating a beautiful responsive portfolio gallery with jquery mouse hover effect. On mouse over each images you see animation background transparency and two permalinks will appear with beauty icons link. this portfolio style, you can use on photo gallery pages and all type of images style that you want to display in your blog.
Let’s go with my tutorial coding bellow:
This Responsive Portfolio Gallery using plugin such as:
The Markup Language
The Responsive Portfolio Gallery will have the following code:
The Cascading Style Sheets (CSS) will have the following code:
/* Portolio Hover */ .da-thumbs li , .da-thumbs li img { display: block; position: relative; } .da-thumbs li { overflow: hidden; } .da-thumbs li article { position: absolute; background-image:url(images/image_hover.png); background-repeat:repeat; width: 100%; height: 100%; } .da-thumbs li article.da-animate { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Initial state classes: */ .da-slideFromTop { left: 0px; top: -100%; } .da-slideFromBottom { left: 0px; top: 100%; } .da-slideFromLeft { top: 0px; left: -100%; } .da-slideFromRight { top: 0px; left: 100%; } /* Final state classes: */ .da-slideTop { top: 0px; } .da-slideLeft { left: 0px; } .da-thumbs li article a { color:#fff; padding:20px; display:block; } .da-thumbs { text-align:center; } .da-thumbs li article h3{ color:#fff; padding-top:30px; } .da-thumbs li article em{ margin-bottom:10px; color:#fff; display:block; } .da-thumbs li article span{ display:inline-block; } span.link_post{ display:block; width:35px; height:35px; background-color:#DF6232; border-radius:50px; cursor:pointer; background-image:url(images/link_post_icon.png); background-repeat:no-repeat; background-position:center; margin-right:10px; } span.zoom{ overflow:hidden; display:block; width:35px; height:35px; background-color:#DF6232; border-radius:50px; cursor:pointer; background-image:url(images/zoom_icon.png); background-repeat:no-repeat; background-position:center; margin-left:10px; } .portfolio_2col article h3{ padding-top:70px !important; } /* Image Grid */ .image_grid { float:left; overflow:hidden; width:700px; position:relative; } .image_grid li{ float: left; line-height: 17px; color: #686f74; list-style:none; overflow:hidden; margin-bottom:23px; margin-right:23px; text-align:center; }
The media queries css will have the following code:
/* Mobile landscape width 320 */ @media only screen and (max-width: 767px) { .image_grid{ width:300px; } .image_grid li img{ width:220px; } .portfolio_4col .da-thumbs li article h3{ padding-top:70px; } .portfolio_3col .da-thumbs li article h3{ padding-top:50px; } .portfolio_2col .da-thumbs li article h3{ padding-top:53px !important; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .image_grid{ width:450px; } .image_grid li{ width:178px !important; } .portfolio_4col .da-thumbs li article h3{ padding-top:58px; } .portfolio_3col .da-thumbs li article h3{ padding-top:34px; } .portfolio_2col .da-thumbs li article h3{ padding-top:23px !important; } }
Now! We have a beautiful Responsive Portfolio Gallery with jquery. Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!
Leave a Reply