Remo Stalin Remo Stalin - 5 months ago 12
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.

http://www.appsumo.com/clickminded-2016/

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 :(

HTML

<div id="css">
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" alt="" />
</div>


CSS

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


#css:hover img {
left: 400px;
}


DEMO

Answer

Here i found it easy steps .... just copy this to HTML widget ...works 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);}); 
//--> 
</script> 
<style type="text/css">
.gplusbox{
background: url("https://lh3.googleusercontent.com/-iOMr0KnDFkY/V17Zm0bj49I/AAAAAAAABGw/Ag_ig7sBwYE5qXn6evvNTFSg9KvhQT7lACLcB/h250/Untitled-1.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}

</style>
<div class="gplusbox"><div>
<a href="hhttps://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png"><img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" /></a>

</div></div>
Comments