How to add a simple image hover in Blogger

In CSS, For me one thing is awesome Yes, it is Image or text Hover. So today I thought to create an article on Image hover So let's began.

STYLE #1

My first image hover is a very simple hover. So for you guys it would be easy to install it on your blogger. But It contain some errors. You can see live demo below

-Go to layout>add a gadget>HTML/Javascript
-Paste the following code

<style type="text/css"> #box { width:600px; height:400px; box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45); border-bottom:2px solid #fff; border-right:2px solid #fff; margin:5% auto 0 auto; background:url(http://d1v2fthkvl8xh8.cloudfront.net/wp-content/uploads/2012/11/BloggingAudience.jpg); background-size:cover;border-radius:5px;overflow:hidden;}
#overlay { background:rgba(0,0,0,.75); text-align:center; padding:45px 0 66px 0; opacity:0; -webkit-transition: opacity .25s ease;-moz-transition: opacity .25s ease;}
#box:hover #overlay { opacity:1;}
#plus { font-family:Helvetica; font-weight:900; color:rgba(255,255,255,.85); font-size:96px;} </style><div id="box"> <div id="overlay"> <span id="plus">+</span> </div></div>

-Save it

-Replace the WIDTH AND HEIGHT with your Image width and height
-Replace the YELLOW LINK with your colour full Image
-Replace the GREEN TEXT with your text

STYLE #2

Click here to see the live demo

-Go to layout>add a gadget>HTML/javascript or create new post>HTML tab
-Paste the following code

<style type="text/css">
.nav{ width: 980px; margin: 100px auto; list-style: none; position: relative;}.nav li{ height: 200px; width: 200px; margin: 25px; float: left; overflow: hidden; border-radius: 50%; border:6px solid #fff; box-shadow: 2px 2px 0 0 rgba(0,0,0,.5); margin: 12px; transition:all 1s ease;}.nav li img{ margin: -70px 0px 0px 0px; transition:all 1s ease;}.nav li a{ text-decoration: none; font-size: 18px; font-weight: bold; color: #fff;}.nav li a:before{ content: attr(title); position: relative; left: 80px; top: 200px; transition:all 1s ease;}.nav li:hover{ border:6px solid #333; box-shadow: 0px 0px 20px 0 rgba(255,255,255,.5);}.nav li:hover img{ margin-left: -150px; margin-top: -150px; cursor: pointer;}.nav li:hover a:before{ top: 160px;}</style>
<ul class="nav"> <li><a href="#" title="Blog"><img src="http://images.cupidspeaks.com/2012/03/6a00d83452d45869e2015438246251970c-800wi.jpg" alt="How to add image hover in blogger" /></a></li></ul>