Stylish Portfolio Widget (Responsive) With Effects

Are you a blogger? If yes then you must have needed a portfolio widget which is responsive as well as stylish therefore I made one for you. Now a days we have been listening of mobile friendly websites or responsive websites but on the internet more than 50% websites/blogs are unresponsive so we need to make our blog’s mobile first. There are many portfolio widgets but most of them are unresponsive so here is the perfect widget for you.

LIVE DEMO

What are the advantages of using this widget?

The main advantage of this widget is responsive. This widget will detect the user device width using media queries and will automatically adjust itself.

Is it free?

Of course it is free for all the dear loyal readers but I kindly request to not change the classes of the widget as they are only invisible credits (Non Links).

Can i change the styles?

Yes you can change the style of widget according to you but not changing the classes. I will also tell you how to customize the widget in this post.

How does this widget work?

I always tell my readers that how I made the widget and how it works just for you so that you can learn it. Other bloggers might not share the working of their widget but I do so that my dear loyal readers are better at coding then normal readers! Happy J

So let’s start-

Adding the class-

First we will add the class to our portfolio division which contains the images-

<div class='mbaportfolio'>
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
<a href='#' title='Image '><img src='imageurl'/></a>
</div>

Now we have added the div so we will add the main magic which is style-

<style>
@media (max-width:290px) {
.mbaportfolio img {width:95%!important;height:auto!important;}
}
.mbaportfolio img {width:300px;height:200px;margin-right:4px;opacity:0.8;margin-top:4px;}
.mbaportfolio img:hover {opacity:1; box-shadow:1px 1px 20px 1px black; }
</style>

Note- For the working of media queries you need to add this code in your template-

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

If you have already added this code then no need to add it.

The final code-

Now our final code will look like-


<style>
@media (max-width:290px) {

.mbaportfolio img {width:95%!important;height:auto!important;}

}
.mbaportfolio img {width:300px;height:200px;margin-right:4px;opacity:0.8;margin-top:4px;}
.mbaportfolio img:hover {opacity:1; box-shadow:1px 1px 20px 1px black; }
</style>

<div class='mbaportfolio'>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
<a href='#' title='Image'><img src='imageurl'/></a>
</div>


Customization-

Change 300px with the width of image which you want , 200px with the height you want.
Change the # with your link URL in each image and imageurl with the image URL in each case
and to change title text change Image.

How's the widget?

Did you installed this widget? if yes then how is the widget looking and is it responsive ? Share your thoughts through comments and do share this widget with your friends.