Remo Stalin Remo Stalin - 1 year ago 68
HTML Question

Moving with cursor image left slide to right without jQuery in Widget code

I want this widget code without jQuery. I checked all posts, but they do not help. its like SUmoME widget.

see the top right blue tab. i want that replace to pic in my blog.

I want from the left corner to right slider when mouse hover like this.pls see demo.

Sorry for my bad english :(


<div id="css">
<img src="" alt="" />


img {
position: relative;
margin: -500px;
left: 0;
transition: left .5s;

#css:hover img {
left: 400px;


Answer Source

Here i found it easy steps .... just copy this to HTML widget perfect

<script type="text/javascript"> 
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-80"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 100);}); 
<style type="text/css">
background: url("") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;

<div class="gplusbox"><div>
<a href="h"><img src="" /></a>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download