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>

Underline the header css animation

I have some div tags on the page and once they are in a viewport, I want them to animate in a certain way. I already got the 'in viewport' part working with waypoint.js so now I am stuck with the animation.
Basically, I want to have a grey underline on all h1 tags at all times. Once they are in view, I want a black line to run on top of that grey line from right to left and almost leave the scene afterwards, stopping at about 25% of grey line.
To demonstrate it, I've changed the effect to work on hover and as you can see, I've got the part when it runs through the grey line, but I'm stuck with the part when it should leave the scene (almost leave the scene - stopping at 25% of grey line):
HTML:
<div class="section-header">
<span>Hello</span>
</div>
CSS:
.section-header {
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
letter-spacing: 5px;
position: relative;
text-align: center;
> span {
display: inline-block;
position: relative;
border-bottom: 1px solid #ccc;
&:before {
content: "";
position: absolute;
width: 0;
height: 1px;
bottom: -1px;
right: 0;
background-color: #000;
visibility: hidden;
-webkit-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}
&:hover {
&:before {
visibility: visible;
width: 100%;
}
}
}
}
http://codepen.io/anon/pen/RWoxBv
Is this possible to do in CSS at all? Or should I use Javascript for it?
To demonstrate the animation further, imagine that this is the black line:
- (starts from right hand side and goes to left)
--
---
----
-----
------
-------
--------
---------
----------
-----------
------------ (point when it covers the grey line and starts to 'leave the scene')
-----------
----------
---------
--------
-------
------
-----
----
--- (stopping there)

So animate an element from left 100% to left -75% (= 25% visible!)
jsBin demo playground
Here's a small nice example that uses a small jQuery plugin taken from here and a bit of standard CSS:
/**
* inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
*
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
* The max returned value is the element height + borders)
*/
;(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el) {
function visPx(){
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
// Let's rock!
$("h1 span").inViewport(function(px){
$(this).toggleClass("animateLine", !!px);
});
p{height:900px;}/*FOR DEMO ONLY*/
h1{
text-align:center;
}
h1 span{
display:inline-block;
position:relative;
overflow:hidden;
}
h1 span:after,
h1 span:before{
content:"";
height:1px;
width:100%;
position:absolute;
bottom:0px;
left:0;
transition: 3s;
}
h1 span:before{
background:#ccc;
}
/* We'll animate this one to -75% */
h1 span:after{
background:#000;
left:100%;
}
h1 span.animateLine:after{
left: -75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>This is title 1</span></h1>
<p>1 Scroll down to find more titles</p>
<h1><span>This is title 2</span></h1>
<p>2 Scroll down to find more titles</p>
<h1><span>This is title 3</span></h1>
<p>3 Scroll down to find more titles</p>
<h1><span>This is title 4</span></h1>
<p>4 Scroll down to find more titles</p>
<h1><span>This is title 5</span></h1>
<p>5 Scroll down to find more titles</p>
Basically set the pseudo :after to initial 100% left, and trigger the CSS3 class that will apply the left -75% transition using the jQ plugin like in the demo.
https://stackoverflow.com/a/26831113/383904
CSS3-Animate elements if visible in viewport (Page Scroll)

How to change css background-image on click?

I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/

You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.

1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.

$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image

There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>

Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}

If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked

how to set the absolute position div center align

I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.

Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}

To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/

I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/

<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div