I am trying to animate a DIV based on the hover state of an anchor tag, but nothing happens. Can someone tell me where I am going wrong? Demo at bottom.
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow:hover + .blue {
-webkit-transition(margin-top 2s ease-in);
margin-top:400px;
}
<nav>
<a class="yellow" href="#">YELLOW</a>
</nav>
<div class="blue"></div>
DEMO: http://jsfiddle.net/liquidengine/btztS/
you can do this only if you put the element that you want to move , inside the element you want to be hovered.
Like:
<nav>
<a class="yellow" href="#"><div class="blue"></div>YELLOW</a>
</nav>
And CSS:
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition:margin-top 2s ease-in;
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
-webkit-transition:margin-top 2s ease-in;
}
.yellow:hover .blue {
margin-top:400px;
}
As far as I know a + in css selects the first sibling. I dont think it does what you are trying to do.
Here is an example using jquery to change the background color onclick in jsfiddle
Jquery snippet for changing css
$(".yellow").hover(function () {
$(".blue").css("margin-top","300px");
$(".yellow").css("margin-top","400px");
});
http://jsfiddle.net/btztS/8/
Also I think you need to update your coding style somewhat. classe named blue and yellow really shouldn't exist, even in a demo. Plus in CSS you should really use hex or rgb to reference colors.
Here is the code you probably want...
http://jsfiddle.net/btztS/7/
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
transition: margin-top 2s;
-moz-transition: margin-top 2s;
-webkit-transition: margin-top 2s;
-o-transition: width 2s;
}
a.yellow:hover {
margin-top:400px;
}
Related
If I wanted to Change the width of an element twice and animate that. For example:
box{
height:100px;
width:100px;
}
.box:hover{
width:300px;
width:200px;
}
I think you need keyframes animation. It should works properly in your case.
like this
#keyframes box-size {
0%, 100% {
width: 100px;
}
50% {
width: 300px;
}
}
.box{
height:100px;
width:100px;
background: pink;
}
.box:hover{
animation: box-size 2s;
}
<div class="box"></div>
If you use animation effect before mix-blend-mode property you will not get mix blend mode.
Once you remove the animation class or disable animation, then mix-blend-mode will work.
What is the problem? I spent hours to solve just this simple thing. Please, help
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
mix blend should take effect anyway
In the old times, adding a transform translateZ(0px) used to solve a lot of problems.
At least in my Chrome, seems to still be the case:
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
transform: translateZ(0px); /* added */
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
Adding mix-blend-mode to the parent element also, solves the issue.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
mix-blend-mode:multiply;
}
.box img{ mix-blend-mode:multiply;}
.animate{
border:1px solid red;
border-radius: 1rem;
width:2rem;
height:2rem;
animation: spin 2s infinite linear;
display:flex;
align-items: space-around;
align-content: stretch;
justify-content: space-around;
}
#keyframes spin {
0% { transform: rotate(0deg); background-color: aqua; }
50% { background-color: yellow; }
100% { transform: rotate(1turn); background-color: aqua; }
}
<div class="animate">•</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
In this problem, animate's stack order is between box and img because animate use keyframe.I think keyframe change animate's stack order.So,Img cannot blend in box.We can change element's stack order by using z-index.
Solution is img must within box.We have two options.Results will be different where you use z-index.
First option, we can change animate's stack order in animate class.
`
.animate{
position:relative;
z-index:2;
}
`
Result - animate will be front of box with img.
Second option, we can change box's stack order in box class.
`
.box{
position:relative;
z-index:2;
}
`
Result - box with img will be front of animate.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
position:relative;
z-index:2;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
Example of page
Sorry about the confusing title, I will try to describe the issue better here.
The page has two equal dividers, when I hover over the left div, I want the opacity to change as well, I want the opacity of the second div to change concurrently. The code currently does this, however, with the right divider, the hover only changes itself and not the left divider.
I am open to new ways to approach this as well.
HTML:
<div class="wrap">
<div class="bgimage" id="left">
<div class="text">
<h1>Portfolio</h1>
</div>
</div>
<div class="bgimage" id="right">
<div class="text">
<h1>Photography</h1>
</div>
</div>
</div>
CSS:
.wrap {
width:100%;
height:100vh;
background-color:#000;
}
.text {
height:55px;
opacity:0.9;
text-align:center;
vertical-align:middle;
position:absolute;
top:0;
bottom:0;
margin:auto; width:50%;
}
.bgimage{
width:50%;
height:100vh;
opacity: 0.6;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#left {
float:left;
background-image:url(left.jpg);
}
#right {
float: right;
background-image:url(right.jpg);
}
#left:hover~div#right, #right:hover~div#left {
opacity: 0.3;
}
#left:hover, #right:hover {
opacity: 1;
}
Of course it will work for the first div but not the second, and you can never select a preceding element in CSS, your best shot is jQuery, take a look at this code:
$(document).ready(function () {
$('.bgimage').hover(function () {
$('.bgimage').removeClass('hovered').addClass('unhovered');
$(this).addClass('hovered').removeClass('unhovered');
});
});
Here's a FIDDLE of your example, I made minor CSS changes .. Hope it helps
I have a div with an inner span with text. This inside span should be centered vertically and horizontally all the time:
http://jsfiddle.net/QW4Wk/
<div>
<span>Text aligned center</span>
</div>
The div has a transition when the mouse is over, which changes its width and height.
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}
However in Chrome (at least) the text looks choppy while the transition is running. I guess this is because the transition goes 1 by 1px and therefor the "center style" has to go back and forward 1px.
Is there someway to fix this to look smoother, something like subpixel?
Thanks.
try this for absolute centering the text..
span {
margin: auto;
color:white;
text-align:center;
height:10px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
and of course lessen your transition speed.
Apply a different change to the span. a transform can be subpixel
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
top:75px;
left:50px;
width: 100px;
transition: -webkit-transform 10s;
-webkit-transform: translate(0px, 0px);
}
div:hover{
width:250px;
height:250px;
}
div:hover span {
-webkit-transform: perspective(999px) translate(25px, 25px);
}
fiddle
Is it possible to make a css transition that causes the width of one div to expand slide over another div instead of moving it out of the way?
Yes, it is possible, here are the HTML and the CSS
HTML:
<body>
<div class="overlord"></div>
<div class="target"></div>
</body>
CSS:
.target
{
z-index:-1;
position:fixed;
left:120px;
width:100px;
height:100px;
background:blue;
}
div.overlord
{
float:left;
z-index:999;
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div.overlord:hover
{
z-index:999;
width:300px;
}
JSFIDDLE