How to fade svg path in/out one after the other? - javascript

I am doing the following but it is fading in/out the path all at once and not one after the other
var periodClass = jQuery(this).parent().attr("class");
jQuery("svg path").each(function(i) {
var elem = jQuery(this);
if (elem.hasClass(periodClass)) {
elem.addClass('active').css('transition-delay', i/5000 + 's');
} else {
elem.removeClass('active').css('transition-delay', i/5000 + 's');
}
});
CSS
path {
opacity: 0;
transition-property: opacity;
transition-duration: 0.7s;
}
path.active {
opacity: 1;
transition-property: opacity;
transition-duration: 0.7s;
}
Also tried this but still, all at once
var periodClass = jQuery(this).parent().attr("class");
jQuery("svg path").each(function(i) {
var elem = jQuery(this);
if (elem.hasClass(periodClass)) {
elem.addClass('active');
elem.each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
} else {
elem.removeClass('active');
elem.each(function(index) {
$(this).delay(400*index).fadeOut(300);
});
}
});

You need to use setTimeout();
here's an example
$(document).ready(function(){
$('div').each(function(i){
var ThisIt = $(this);
setTimeout(function(){
ThisIt.addClass('active');
} , i * 1000);
});
});
div{
margin: 20px;
padding: 10px;
font-size: 30px;
text-align: center;
background : #eee;
display: none;
}
.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Well, one way to do it:
var pnum = 0;
var $paths = $("svg path");
nextFade();
function nextFade () {
$paths.eq(pnum).fadeOut( "slow", function() {
// Animation complete. Increase counter Call next fade.
pnum++;
if(pnum < $paths.length){
nextFade();
}
});
}

Related

setTimeout(function() is not working in javascript

I am currently working to create a custom alert box for any errors and below is the code I am using, the alert box is appearing fine but it's not auto-closing after 600 milliseconds, its only closed after the manual click of the close button. what I am doing wrong here and how to auto-disappear the alert box
I moved the setTimeout outside the click event and set the div value:
function displayError(errorMessage) {
var messageObject = "<div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
var div = close[i].parentElement;
setTimeout(function(){div.style.display = "none"; }, 600);
close[i].onclick = function(){
div.style.opacity = "0";
}
}
}
div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
</body>
</html>
I have followed the below steps and fixed the issue reported here, The below approach allowed me to show multiple alert box at the same time and auto close them based on the message number instead of close all the alert box at the same time
<!DOCTYPE html>
<html>
<style>
div.alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
</style>
<body>
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
</body>
<script>
var messageCount = 0;
var messageTimeout = 3000;
function displayError(errorMessage) {
var messageObject = "<div class='alertbox' id='alertbox"+messageCount+"'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var messageID = messageCount;
setTimeout(function(){removeElement("alertbox" + messageID); }, messageTimeout);
closeAlertbox();
}
function removeElement(id) {
if (document.getElementById(id)) {
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
}
function closeAlertbox() {
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function()
{ div.style.display = "none";
}, 10);
}
}
}
</script>
</html>
I would recommend using remove() to remove the alertbox, so there won't be any closebuttons left and the for-loop can be removed.
Maybe this would be a possible solution:
function displayError(errorMessage) {
var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>";
var container = document.getElementById("divMessageContainer");
container.innerHTML += messageObject;
var box = document.getElementById("alertbox");
var close = document.querySelector(".closebtn");
close.onclick = function(){
box.remove();
};
setTimeout(function(){
box.style.opacity = 0;
setTimeout(function() {
box.remove();
}, 1000);
}, 2000);
}
div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px; -webkit-transition: opacity 1s linear;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
I also added a transition to opacity, so if the user doesn't manually close the alertbox, it will fade (in this case after 2 seconds, but you can play with that time).
function displayError(errorMessage) {
var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var close = document.getElementsByClassName("closebtn");
var i, index;
for (i = 0; i < close.length; i++) {
setTimeout(function(){
close[index].parentElement.style.display = "none";
index++;
}, 600);
close[i].onclick = function(){
var div = this.parentElement;
div.style.display = "none";
}
}
}
Try this one. Take care about loop when using async.

Javascript Fading out/in on mouse movement

I want to have a fixed nav which fades out when the mouse isn't moving and fades back in when it does.
I've came across this other post which does the job but the problem is that it uses visibility and I want to use opacity that way I can make it fade in and out with a transition transition: all .4s ease-in-out;
$("#fp-nav").style.opacity = "0";
$("html").mousemove(function(event) {
$("#fp-nav").style.opacity = "1";
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function() {
$("#fp-nav").style.opacity = "0";
}, 1000);
}
function myStopFunction() {
if (typeof myVar != 'undefined') {
clearTimeout(myVar);
}
}
#fp-nav {
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transition: all .4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fp-nav">
Hello world Hello world Hello world Hello world
</div>
Or am I supposed to use fp-nav.style.opacity = "0"; instead of $("#fp-nav").style.opacity = "0";
You can replace .hide() and .show() by your own css code to visually hide the bar: hide becomes css("opacity", 0) and show becomes css("opacity", 1).
Then, you add a transition to your bar:
.navbar {
transition: opacity 1000ms ease-in-out;
};
$("div").css("opacity", 0);
$("html").mousemove(function( event ) {
$("div").css("opacity", 1);
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").css("opacity", 0);
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
div {
transition: opacity 1000ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>navbar</div>
It might be nice to let the css define how you want to hide/show via an additional class. You can then, for example, use addClass("is-hidden") and removeClass("is-hidden"):
var hiddenClass = "is-hidden";
var customHide = function($el) {
$el.addClass(hiddenClass);
}
var customShow = function($el) {
$el.removeClass(hiddenClass);
}
customHide($("div"));
$("html").mousemove(function( event ) {
customShow($("div"));
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
customHide($("div"));
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
/* CSS now determines how we want to hide our bar */
div {
position: relative;
background: green;
transition: transform 500ms ease-in-out;
}
div.is-hidden {
transform: translateY(-160%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>navbar</div>
$(document).on('mousemove', function(){
$('#nav').addClass('shown');
setTimeout(function(){
$('#nav').removeClass('shown');
}, 5000);
});
#nav {
opacity: 0;
transition: opacity 1s ease-in-out;
background: black;
width: 300px;
height: 100px;
}
#nav.shown {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
</div>
Here's my go:
Obviously, edit the timings and opacity as needed. The animations themselves are pure CSS, and JS is just used to add/remove a class from the nav.

How to speed up fadein / fadeout

I'm using the following code to fadein/fadeout images every second which works fine but I would like to fade the images in and out every 1/2 second. I can change the setInterval to 500 but this simply causes a bit of a mess. I clearly need to redfine fadein and fadeout.
I have bootstrap loaded so I'm guessing the functions are defined within the bootstrap js but how do I respecify their timing?
var $els = $('div[id^=image]'),
i = 0,
len = $els.length;
var start = 1;
var end = 999999999999999;
jQuery(function () {
$els.slice(1).hide();
spin = setInterval(function () {
$els.eq(i).fadeOut(function () {
i = Math.floor(Math.random() * len);
$els.eq(i).fadeIn();
});
start = new Date().getTime();
if (start > end) {
clearInterval(spin);
}
}, 1000);
{% for m in myusers %}
if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';}
{% endfor %}
});
Since you are using jQuery, why not use fadeOut/fadeIn or fadeToggle?
$(document).ready(function() {
setInterval(function() {
$('.a1, .a2').stop().fadeToggle(500);
}, 500);
});
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 1px;
display: inline-block;
}
.a1,
.a2 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: blue;
}
.a2 {
display: none;
background-color: red;
}
.wrapper2 .a1 {
display: none;
}
.wrapper2 .a2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="wrapper wrapper2">
<div class="a1"></div>
<div class="a2"></div>
</div>
var box = document.getElementById('box');
function fadeOutIn(elem, speed ) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
var inInterval = setInterval(function() {
elem.style.opacity = Number(elem.style.opacity)+0.02;
if (elem.style.opacity >= 1)
clearInterval(inInterval);
}, speed/50 );
} // end if
}, speed/50 );
} // end fadeOut()
fadeOutIn(box, 2000 );
Hello please see my solution . It is your helpful or not.
Thanks.

Add transition css to image slider

I have a slider with 3 images and 3 buttons which change the current image 'src' attribute (and hence change the current image), but now I want to add a smooth transition when I change the image and I would like to get this using css transitions.
So when I click on any bullet I need the current image fades out and then the new image fades in. how can I do this?
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Here is a CODEPEN
PD: I want to do this without Jquery.
CodePen sample
I've added some css transitions to the css
div#image-container {
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
div#image-container.fade {
opacity:0;
}
and some function to handle the event:
var image = document.getElementById('image-container');
if(image.className === 'fade'){
image.className = '';
setTimeout(function(){
image.className = 'fade';
},1000)
}else{
image.className = 'fade';
setTimeout(function(){
image.className = '';
},1000)
}
setTimeout(function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
},1000);
use CSS3 animation with add class in javascript
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++) {
(function(index) {
listItemContainer.children[i].onclick = function() {
bulletNumber = index;
imageChanger[0].className = "hide";
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png');
},501);
setTimeout(function(){
imageChanger[0].className = "show";
}, 1001);
}
})(i);
};
body {
text-align: center;
}
#carousel-index {
margin: 0;
padding: 0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
#image-container img.show {
animation: show .5s;
animation-fill-mode: both;
}
#keyframes show {
from {
transform:scale(0.7);
opacity:0
}
to {
transform: scale(1);
opacity:1
}
}
#image-container img.hide {
animation: hide .5s;
animation-fill-mode: both;
}
#keyframes hide {
from {
transform:scale(1);
opacity:1
}
to {
transform:scale(0.7);
opacity:0
}
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png" />
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
You can use CSS transition, and i guess that desired property is opacity.
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
} , 100);
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Start image opacity should be 0, of course:
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
And then, on click (remove added class -> set opacity to 0 again), and add it again. You can play with values to get desired effect.
EDIT: fadeOut/fadeIn... it was little tricky, because of one container, and img src changing, but additional timeout solves it:
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
imageChanger[0].classList.add('fadeOut');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
imageChanger[0].classList.remove('fadeOut');
} , 1000);
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
} , 1000);
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
img.fadeOut {
opacity:0;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
P.S. Images should be probably preloaded, in order to all work fine on first load.
One more alternative, JS based, didn't change HTML or CSS (explanation as comments in the code):
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img')[0];
var newSrc, fadeDelta=-0.01; //don't change 'delta', change 'fadeoutDelay' and 'fadeinDelay'
(function initImageChanger(i,count){
imageChanger.style.opacity = 1; //set opacity in JS, otherwise the value returns "" (empty)
listItemContainer.children[i].onclick = function(){
var fadeoutDelay=5, fadeinDelay=15, opacity=parseFloat(imageChanger.style.opacity); //change delays to alter fade-speed
function changeSrc(){
var src = imageChanger.getAttribute('src');
var ext = src.substring(src.lastIndexOf('.')); //store extension
src = src.substring(0,src.lastIndexOf('_')+1); //store source up to the identifying number
return src+i+ext; //combine parts into full source
}
function fade(delay){
imageChanger.style.opacity = (opacity+=fadeDelta);
if (fadeDelta<0 && opacity<=0){ //fade-out complete
imageChanger.setAttribute('src',newSrc);
fadeDelta*=-1, delay=fadeinDelay; //invert fade-direction
} else if (fadeDelta>0 && opacity>=1){newSrc=null, fadeDelta*=-1; return;} //fade-in complete, stop function
setTimeout(function(){fade(delay);},delay);
}
//start fade, but only if image isn't already fading, otherwise only change source (and reset)
if (changeSrc() != imageChanger.getAttribute('src')){
newSrc=changeSrc();
if (opacity==0 || opacity==1){fade(fadeoutDelay);}
else if (fadeDelta>0){fadeDelta *= -1;} //reset fade for new source
}
};
if (++i < count){initImageChanger(i,count);} //iterate to next element
})(0,listItemContainer.children.length); //supply start-arguments
body {text-align:center;}
#image-container img {width:auto; height:150px;}
#carousel-index {margin:0; padding:0;}
#carousel-index li {display:inline-block; width:2em; height:2em; border-radius:100%; background-color:#666; cursor:pointer;}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index"><li></li><li></li><li></li></ul>
</div>
codepen: http://codepen.io/anon/pen/xgwBre?editors=0010
It's not a perfect solution, but here's one way of doing it without jQuery:
First create a new function:
function fadeChange(element) {
var op = 0.1;
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}
Then call that function when setting the new image:
fadeChange(imageChanger[0]);
This is demonstrated through the updated codepen here.
It's a bit clunky, but does fade the images. You may want to consider using a single image for the monitor, and then simply changing the contents of the monitor through this method.

Vertical distribution of elements (and animation) - jQuery

I like to know the cleanest method to distribute elements vertically with jQuery. I nailed it but it's not very clean right >< ? I would like to get to do it without plugin... Thank you in advance ;-)
Here my JSFiddle
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
if(firstElem.length){
var heightCall = (firstElem.offset().top)+(firstElem.outerHeight())+(gap);
var middleElem = $('#dolore');
middleElem.offset({top : heightCall});
var lastElem = $('#amet');
var NewHeightCall = (middleElem.offset().top)+(middleElem.outerHeight())+(gap);
lastElem.offset({top : NewHeightCall});
/* Animation */
$('#lorem, #dolore, #amet').hover(
function(){
$(this).stop().animate({left: (($(this).offset().left)-(20))+'px',opacity:'0.5'},'slow')
},
function(){
$(this).stop().animate({left: (($(this).offset().left)+(20))+'px',opacity:'1'},'slow')
});
}
});
I have fiddled around with your code:
This is a simplified version:
HTML:
<div id="lorem" class="vertical-block">My first ID div</div>
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<div id="amet" class="vertical-block">My third ID div</div>
CSS:
.vertical-block {
position: absolute;
padding:15px;
}
#lorem{
top:20%;
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
Javascript:
jQuery(document).ready(function($) {
var gap = 10;
var firstElem = $('#lorem');
var top = 0;
$('.vertical-block').each(function(element){
var $currentElement = $(this);
if (top === 0) {
top = $currentElement.offset().top + $currentElement.outerHeight() + gap;
} else {
$currentElement.offset({top: top});
top = top + $currentElement.outerHeight() + gap;
}
});
});
https://jsfiddle.net/rae2x4e0/1/
Now if you want to go for a purely css solution, then:
HTML:
<div class="container">
<div id="lorem" class="vertical-block">My first ID div</div>
<br />
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<br />
<div id="amet" class="vertical-block">My third ID div</div>
</div>
CSS:
.container {
position-relative;
text-align: right;
padding-top: 10%;
}
.vertical-block {
padding:15px;
display: inline-block;
margin-top: 20px;
}
#lorem{
right:40px;
background:#f79673;
}
#dolore{
right:80px;
background:#cd7454;
}
#amet{
right:40px;
background:#a15338;
}
.vertical-block:hover {
opacity: 0.5;
padding-right: 30px;
-webkit-transition: all 2s;
transition: all 0.4s;
}
https://jsfiddle.net/ycdwpjxw/1/

Categories

Resources