I have a couple of images, and when I hover over one of them, I want all the images to change position. There should also be an animation when the images change place so they slide to their new position. I am using jQuery. I have been trying different solutions but nothing works, so I don't post any javascript.
HTML:
<div class="container">
<div class="picture one"></div>
<div class="picture two"></div>
<div class="picture three"></div>
</div>
CSS
.container {
position: relative;
}
.picture {
width: 100px;
height: 150px;
background-color: green;
border: 1px solid #ccc;
position: absolute;
}
.two {
left: 60px;
top: 10px;
z-index: 2;
}
.three {
left: 35px;
top: 50px;
z-index: 1;
}
.three:hover {
top: 0;
left: 100px;
}
.two:hover {
left: 0;
top:0;
}
.one:hover {
left: 200px;
}
Link to jFiddle: http://jsfiddle.net/LJ9wL/2/
This will give you a start. http://jsfiddle.net/LJ9wL/3/
$('.picture').on('mouseenter', function() {
$('.picture').css({top: '0', left: '200px'});
$(this).css({top: '60px', left: '20px'});
});
$('.picture').on('mouseleave', function() {
$('.picture').css({top: '0', left: '200px'});
$(this).css({top: '0', left: '200px'});
});
Related
This question already has answers here:
Position absolute with Left:100% , Child element goes out of the parent continer
(4 answers)
Closed 2 years ago.
Let's say I have some code like this:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b {
position: absolute;
top: 30%;
right: -33px;
}
.c {
position: absolute;
top: 50%;
right: -88px;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
If you run the snippet you'll see the desired behavior, where both b and c are positioned on the right edge of the a element.
The only issue I'm having is that on my website b and c have dynamic contents (I don't know what they'll be ahead of time). Is it possible to somehow modify the right property of both b and c such that I don't have to hardcode the value in and they will still be positioned on the outer edge of a?
You can use:
left: 100% or
right: 0 and transform: translateX(100%)
Example:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b, .c {
position: absolute;
right: 0;
transform: translateX(100%);
}
.b {
top: 30%;
}
.c {
top: 50%;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
I'd probably go a step further and wrap .b and .c with another element so that you can get rid of hardcoding top too.
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.d {
position: absolute;
top: 50%;
right: 0;
transform: translate(100%, -50%);
}
.c {
margin-top: 1em;
}
<div class="a">
<div class="d">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
</div>
I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks
Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?
What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>
Hello wonderful people of the internet,
I am having a problem with a website that I am building.
I am seeing some strange behavior with aligning an image in the center of an element while also applying a smooth "move upwards" animation.
It is perfectly centered in chrome, but not in internet explorer and edge.
I think this has to do with setting the CSS property, top: 0;. Because if I do that, it isn't centered in Chrome aswell.
Here is the jsfiddle.
https://jsfiddle.net/p4souo8d/2/
// project div animation on hover
$(".project").bind({
mouseenter: function() {
var image = $(this).find(".project-inner img"), projectInner = $(this).find(".project-inner");
var bottomMargin = (projectInner.height() - image.height()) / 2;
projectInner.fadeIn(400);
image.animate({ bottom: Math.round(bottomMargin) }, 300);
},
mouseleave: function() {
$(this).find(".project-inner").fadeOut(200).promise().done(function(){
$(this).find("img").css({
bottom: 0
});
});
}
});
.project {
width: 360px;
height: 260px;
background-color: #2C3E50;
float: left;
margin: 10px 15px;
position: relative
}
.project .project-inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3498DB;
display: none
}
.project .project-inner img {
width: 64px;
height: 64px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="project">
<img src="http://lorempixel.com/360/260/" alt="" />
<div class="project-inner">
<img src="http://lorempixel.com/400/200" alt="Meer informatie" />
<div class="project-information">
Hello there! :)
</div>
</div>
</div>
P.S. Sorry about the pictures, they are randomly generated.
This should work
.project .project-inner img {
width: 64px;
height: 64px;
position: absolute;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
margin: 0 auto;
}