Develop Reference

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

If you only care for browsers supporting html5 and css3, use css animations. The syntax's a bit like your existing code when it comes to the key frames.
If you wanna support all browsers, use jQuery's animate funcion, which changes the styles every 100ms or so, thus doesn't require css3 support. The css3 animation solution has a better performance but everyone can afford to run jQuery's animation, you won't really feel any difference.

i hope understand your question correctly...
i made it for you :)
img {
border: 1px solid black;
width:50px;
height:50px;
}
.parent{
top:100px;
padding:3px;
background-repeat:no-repeat;
cursor:pointer;
border: 5px solid black;
}
.parent span{
position:absolute;
top:50px;
transition: left .5s;
left: 0;
margin-left:-100px;
width:50px;
height:50px;
}
.parent:hover span{
left:100px;
}
<a class="parent"> >
<span>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/twitter.png" alt="" />
</span>
</a>
hope its good!

if you have span tag on your code it will effect this tag too... i suggest you to give this specific span an id and probably it will work.
here is an example:
.parent #mySpan{
position:absolute;
top:150px;
transition: left .5s;
left: 0;
margin-left:-50px;
width:50px;
height:50px;
}
.parent:hover #mySpan{
left:50px;
}
<a class="parent">
<span id='mySpan'>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
</span>
</a>

I found this Javasript code without (HTML,CSS) working in widget.. but how to do like this mouse hover? DEMO
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'absolute';
imgObj.style.top = '240px';
imgObj.style.left = '-300px';
imgObj.style.visibility='hidden';
moveRight();
}
function moveRight(){
if (parseInt(imgObj.style.left)<=10)
{
imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
imgObj.style.visibility='visible';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
//stopanimate = setTimeout(moveRight,20);
}
else
stop();
f();
}
function stop(){
clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" style="margin-left:170px;" />

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>
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" />
</div></div>

How to "dim" certain area in a webpage

I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}

It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.

.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>

Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>

Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle

Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>

Overlay for images doesn't work

I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!

I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.

How to make image button standout when hover without affecting other button position

I have a simple script: http://jsfiddle.net/PA9Sf/
I want when I hover a particular button, the size is enlarged and the button stand out on the top of other buttons, instead of affecting the position of other buttons as currently in the jsfiddle above.
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<script>
jQuery('img').hover(function() {
$(this).attr('width', '200px');
}, function() {
$(this).attr('width', '100px');
});
</script>

First of all i would highly recommend you to use pure CSS for this.
Second, I think you can achieve this with a transform scale:
img:hover
{
transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5)); /* IE 9 */
-webkit-transform: scale(1.5, 1.5);
}
You can play around with the ratio yourself. Note that i added a marign so the images don't go off-screen
jsFiddle

Changed your code.Try this Fiddle
CSS:
.img{
float:left;
margin:0px 10px;
position: fixed;
top:10px;
}
.img1{
left:0px;
z-index:3;
}
.img2{
left:120px;
z-index:2;
}
.img3{
left:240px;
z-index:1;
}

On hover I gave a try with css position as fixed, please try this new jsfillde - http://jsfiddle.net/c3hwf/
CSS Code
img{
width: 100px;
}
img:hover{
width:200px;
position: fixed
}
HTML Code
<p>This is just a test</p>
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />

Collection of Creative button Hover and Click Effects

width CSS2 :
DEMO
div{width:100px; float:left;border:1px solid #fff; margin-right:5px}
div img{width:100%;}
jQuery('img').hover(function() {
$(this).css({width : '200px', position:'absolute'});
}, function() {
$(this).css({width: '100px', position:'static'});
});

How do I make an image stay at the bottom of the screen no matter the screen height/width?

I'm trying to make an image appear when you roll over text on the bottom right side of the screen. How do I get it down there for all screen widths and heights?

you can use fixed positioning on the image and assign the left,top, right or bottom attributes to suit your needs see: http://www.w3schools.com/css/css_positioning.asp for an example

This'll work:
<style type="text/css">
img.floating {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<img class="floating" src="url to image" />

:hover doesn't work for IE6 unless it's being used on a link. Use this.
<style type="text/css">
#myFavoriteFooterImage {
bottom:0px;
right:0px;
position:fixed;
display:none;
}
</style>
<script type="javascript">
document.getElementById("mousyTextFunTime").onmouseover = function(){
document.getElementById("myFavoriteFooterImage").style.display = "";
};
document.getElementById("mousyTextFunTime").onmouseout = function(){
document.getElementById("myFavoriteFooterImage").style.display = "none";
};
</script>
<div id="mousyTextFunTime">Text to mouse over</div>
<img id="myFavoriteFooterImage" />

Create a CSS style for :hover on the text.
<style type="text/css">
#bottom { display:none; }
#text:hover #bottom {
display:block;
position:absolute;
left:0; // how far from the left
bottom:0;
}
</style>
<div id="text>TEXT</div>
<img src="bottomimage.jpg" id="bottom">