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
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>
The inner div has a variable height depends on the length of the text inside, which is always shorter than the outer div. I'd like the inner overlay div to slide up from top:100% to bottom:0 when the outer div is hovered. My CSS code below does not produce the slide up effect I want. It simply pops up the inner div at the bottom of the outer div.
<div class="outer">
<div class="inner">This is a content block.</div>
</div>
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; top:100%; bottom:auto;
transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
top:auto; bottom:0;
}
your code cannot work because transition doesn't work from/to auto.
you could set bottom:0 by default and play with transfom, e.g.
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; bottom:0;
transform: translateY(100%);
transition: transform 300ms;
}
.outer:hover .inner {
transform: translateY(0);
}
I'm trying to mimic sites like: http://shiz.co/ and http://www.maison-vignaux.com/work
The way the images show up, it's like they're not moving, but more of it gets shown in an interval. I want this type of animation. Right now, my image moves rather than having more of it show up like the sites above.
I have no idea how to accomplish this.
Here's my fiddle: https://jsfiddle.net/z7ukk6kb/ (disregard the name of the animation)
EDIT: problem was the background position on the div. now it does what I want.
<div class="parallax-elem">
<div class="img"></div>
</div>
$('.img').addClass('slide-top');
My CSS:
.slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
Try removing background-position from .img.
Since you have set background-position: center center, as the width of the div increases during the animation, the background image keeps adjusting to stay centered. That's the reason it keeps moving.
$('.img').addClass('slide-top');
.slide-top {
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both infinite;
}
#keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
body {
max-width:800px;
margin:0 auto;
position:relative;
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-elem">
<div class="img"></div>
</div>
The reason this happens is because you use background-position center. And that is exactly what is is doing, it is aligning you image in the center. If you'd change is to background-position: left center, the problem is fixed, as you can see in this fiddle.
You could also remove the background-position entirely, but then you will also loose you vertical alignment, you might not want that.
Also, you can make your animation a whole lot easier, you don't need keyframes:
.img{
width: 0%;
background-position: left center;
animation: width 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.img.slide-top{
width: 100%;
}
I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
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;
}