I have a rectangle created in CSS, added a transition so when I hover, the shape shrink and disappear:
.shapeB{
background-color: #FFCC00;
width: 100px;
height: 100px;
-webkit-transition:all 1s;
}
.shapeB:hover{
height:0px;
}
<div class="shapeB"></div>
But the fact that it shrinks up is not what I want, I want it to shrink going down. Trying to stimulate liquid being consumed. Is it possible?
You could somehow missplace the div 100px down, to give that impression. Something like this:
.shapeB{
background-color: #FFCC00;
width: 100px;
height: 100px;
position: relative;
top: 0;
-webkit-transition:all 1s;
}
.shapeB:hover{
height:0px;
top: 100px;
}
<div class="shapeB"></div>
.box{
position:absolute;
width: 100px;
height: 100px;
left:50px;
top:50px;
}
.shapeB{
background-color: #FFCC00;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
-webkit-transition:all 1s;
}
.shapeB:hover{
height:0px;
}
<div class="box">
<div class="shapeB"></div>
</div>
Related
If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
I'm trying to create the effect of an opening door in css.
The issue I'm having is that the part which rotates also slides along the y axis. A door has a fixed rotation point, which is not really working here.
How can I prevent this sliding and ensure that the right part of the div .mover stays fixed to the right of the div .door?
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
}
.door:hover .mover {
transform-origin: 100% 40%;
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Move the transform-origin to the base .mover selector, instead of the .door:hover .mover selector. Like this:
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
transform-origin: 100% 40%;
}
.door:hover .mover {
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Hi for a webshop i want the product block to open like a book. and show a image on de inside-left (when opened)
i tried to do this. It works ok but i want the black div to open to the left. this one will contain the image. When i put a negivate -180 degrees it does not seem to work ok.
.left,
.right {
width: 100%;
height: 200px;
float: left;
color: white;
position: absolute;
}
.left {
background: red;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
height: 250px;
padding: 0;
border: 10px solid #10832d;
}
.right {
background: black;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
height: 250px;
padding: 0;
border: 10px solid #10832d;
}
.wrapper {
perspective: 1000px;
perspective-origin: 100%;
100%;
;
-webkit-perspective: 1000px;
-webkit-perspective-origin: 100%;
100%;
;
}
.wrapper:hover .right {
transform: rotate3d(0, 1, 0, -180deg);
transform: rotateY(180deg);
transform-origin: 100%;
0;
transition: transform 1s;
-webkit-transform: rotateY(180deg);
-webkit-transform-origin: 100%;
0;
-webkit-transition: -webkit-transform 1s;
}
<div style="width:50%">
<div class="col-md-3 wrapper" style="position:relative;min-height:250px;">
<div class="left">sdfsdf</div>
<div class="right">sdfdsfds</div>
</div>
</div>
Your problem with transform-origin not with rotation degree, in your case:
-webkit-transform-origin: 100%; 0;
// ^ X ^ Y
That means x-axis offset 100% of div (full offset on x-axis)
No problem, Now just reset the origin to zero ( to start rotation from begin of div ) like this :
-webkit-transform-origin: 0;
Also don't forget float: right because the div will open to the left.
CSS / HTML :
.left,.right {
width:100%;
height:200px;
color:#FFF;
position:absolute;
}
.left {
background:red;
-webkit-border-top-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-bottomright:100px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
height:250px;
border:10px solid #10832d;
padding:0;
}
.right {
background:#000;
-webkit-border-top-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-bottomright:100px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
height:250px;
border:10px solid #10832d;
padding:0;
}
.wrapper {
perspective:1000px;
perspective-origin:100%;
-webkit-perspective:1000px;
-webkit-perspective-origin:100%;
}
.wrapper:hover .right {
transform:rotateY(180deg);
transform-origin:0;
transition:transform 1s;
-webkit-transform:rotateY(-180deg);
-webkit-transform-origin:0;
-webkit-transition:0 1s;
}
<div style="width:50%; float:right">
<div class="col-md-3 wrapper" style="position:relative;min-height:250px;">
<div class="left">left side</div>
<div class="right">right side</div>
</div>
</div>
I'm trying to emulate the hover effect you can see here:
http://www.timeout.com/newyork (When you hover on the articles.)
I understand how to make a div move on :hover, what I don't understand is how they've hidden the "read more" button until the div is hovered over.
Essentially I would like to know how to hide a div until mouse over, then have it slide out from under another.
Here is a pure CSS solution I quickly hacked up: CSS Hover Effect
h1, h2, h3, h4, h5{
margin:0px;
}
.tile{
overflow: hidden;
width: 400px;
height:350px;
}
.tile:hover > .body{
transition: all 0.5s ease;
top: -3em;
}
.body{
transition: all 0.5s ease;
background-color: #333;
margin:0px;
color: #fafafa;
padding: 1em;
position:relative;
top: -1em;
}
<div class="tile">
<img src="http://lorempixel.com/400/300">
<div class="body">
<h2>Test Header</h2>
<p>Info to display</p>
</div>
</div>
Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.
They coukd change the maxHeight ...
.read_more {
maxHeight: 2px;
overflow:hidden;
}
.read_more:hover {
maxHeight: 30px;
}
See if this simple example helps:
.main{
width: 300px;
height: 300px;
position: relative;
background:yellow;
overflow:hidden;
}
.hovered{
width: 100%;
height: 64px;
background: gray;
position: absolute;
bottom: -28px;
}
.hovered span{
background: red;
color: #fff;
display:block;
width: 100%;
padding: 5px 0;
}
.main:hover .hovered{
bottom: 0;
}
https://jsfiddle.net/4zak8bfp/
You can do it using some jQuery addClass() and removeClass() methods.
Here is an example:
HTML:
<div class="wrapper">
<div class="caption">
<H1>This is a title</H1>
<p>
This is sample contents...
</p>
<div class="read-more-wrapper">
Read More
</div>
</div>
</div>
CSS:
.wrapper{
position: relative;
width: 450px;
height: 250px;
background-color: #2f89ce;
overflow: hidden;
}
.caption{
display: block;
position: absolute;
bottom: -30px;
width: 100%;
height: auto;
background-color: #fff;
transition: all ease-in-out 0.3s;
}
.read-more-wrapper{
background-color: #d03134;
height: 30px;
}
.slidein{
bottom: 0;
transition: all ease-in-out 0.3s;
}
JQuery:
$('.wrapper').on('mouseenter', function(){
$(this).find('.caption').addClass("slidein");
}).on('mouseleave', function(){
$(this).find('.caption').removeClass('slidein');
});
Here is the fiddle:
https://jsfiddle.net/bk9x3ceo/2/
Hope that helps.
Here's a fiddle:
Fiddle
CSS:
.navbar img{
background: #0066FF;
width: 50px;
position: fixed;
margin-bottom: 20%;
transition: width 0.5s;
-webkit -transition: width 0.5s;
}
.navbar img:hover{
background: #99CCFF;
width: 125px;
clear: both;
}
#1{
top: 0px;
}
#2{
top: 50px;
margin-top: 50px;
}
#3{
top: 100px;
}
#4{
top: 150px;
}
body {
margin: 0px;
}
Essentially, I just want each individual square to not overlap each other. I've been trying to use margins, but I must be doing something wrong. Any help?
if you don't need to have the fixed position you can do it this way:
http://jsfiddle.net/ry59aomd/3/
your css code can be simplified to:
.navbar img{
background: #0066FF;
width: 50px;
transition: width 0.5s;
-webkit -transition: width 0.5s;
}
.navbar a{
display:block;
float:left;
clear:both;
}
.navbar img:hover{
background: #99CCFF;
width: 125px;
}
Your html code can be simplified too:
<div class="navbar">
<img src="logo.png"/>
<img src="logo.png"/>
<img src="logo.png"/>
<img src="logo.png"/>
</div>
The fiddle above shows the output (and you could then position the whole navbar, rather than the individual elements)
.navbar {
position:fixed;
top:0;
left:0;
}