I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
Here I have an animation that makes a blinking border next to the title you're hovering on:
#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes blink {
0% { border-left: 10px solid rgba(215, 215, 215, 1); }
50% { border-left: 10px solid rgba(215, 215, 215, 0); }
100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}
Now, the problem is that the transition doesn't support the animation.
I already fixed it for the transition-in with the animation-delay property, but the transition-out doesn't work because the animation is running.
FIDDLE
This is a bit of a hack way to do this, but you can accomplish the effect you are looking for with positioning.
Basically, instead of setting the border width to be 0px when the links are not being hovered, set the width to 10px (the same as onHover) and use relative positioning to move the element to the left 10px, as if the border is not there.
Then set the animation of the left property to be 0.2s ease and set left: 0 in the :hover state.
#link_list a{
border-left: 10px solid transparent;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;
position: relative;
left: -10px;
}
#link_list a:hover {
left: 0px;
}
With this, you can remove the transition-delay as well.
JSFiddle
You should use left: -10px; property instead of transition-delay: 0.2s; animation properties, add this properties into things #link_list a{ },
Check this Demo jsFiddle
CSS
#link_list a{
color: inherit;
text-decoration: none;
border-left: 0px solid transparent;
border-width: 0px;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
left: -10px; // ADD THIS NEW
}
I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:
<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>
And here's the CSS:
.Enlarge {
position:relative;
}
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}
div.Enlarge:hover span{
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}
However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.
Here's the example: Example
Thanks in advance for your input!
Using visibility and opacity you can achieve a fade effect.
JSFiddle Demo
Add these styles:
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
/* rest of your styles below */
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 8 years ago.
I have a website, and I decided to replace the jquery based toggle boxes with pure CSS snippets. When I use fixed height value for the transition (last lines of the CSS), it works well, but with the auto value, the animation is missing, only the height change has an effect!
Is there a way to use this with auto value? I would like to use variable texts and no scripts.
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container section{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
height: 120px; /*auto*/
}
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-1">About us</label>
</div>
<div>
<input id="ac-2" name="accordion-2" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-2">About us</label>
</div>
</div>
One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...
Here's a DEMO
You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container section{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
max-height: 0px;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
-webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
max-height: 500px; /*auto*/
}
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<section class="ac-small">
<p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p>
</section>
<label for="ac-1">About us</label>
</div>
<div>
<input id="ac-2" name="accordion-2" type="checkbox" />
<section class="ac-small">
<p>Some content... </p>
</section>
<label for="ac-2">About us</label>
</div>
</div>
You can't animate to or from a dimension of "auto" (unfortunately). My usual approach for this is to animate the height of an outer DIV which has a single child which is a style-less DIV used only for measuring the content height.
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
}
#grow {
-moz-transition: height .5s;
-ms-transition: height .5s;
-o-transition: height .5s;
-webkit-transition: height .5s;
transition: height .5s;
height: 0;
overflow: hidden;
outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
<div class='measuringWrapper'>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
<div>
The contents of my div.
</div>
</div>
</div>
You should use scaleY.
ul {
background-color: #eee;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease-in-out;
}
p:hover ~ ul {
transform: scaleY(1);
}
<p>Here (scaleY(1))</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Or you can use clip to cut the list.
ul {
clip: rect(auto, auto, 0, auto);
position: absolute;
margin: 0;
padding: .5rem;
color: white;
background-color: rgba(0, 0, 0, 0.8);
transition-delay: 0.29s;
transition-property: clip;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul {
clip: rect(auto, auto, 10rem, auto);
}
<h3>Hover here</h3>
<ul>
<li>This list</li>
<li>is clipped.</li>
<li>A clip transition</li>
<li>will show it</li>
</ul>
<p>
Some text...
</p>
CSS transition doesn't work with auto value. Get the scroll height with JavaScript el.scrollHeight or use max-height instead.
auto isn't an appropriate type for an animatable property, see CSS Transitions: 7. Animatable properties. You need either a length (px,em,...) or percentage (13.37%).
Thus a CSS only solution isn't possible, as long as auto isn't added to the list. You'll need to use JavaScript or a specific length value.
James here. I have a quick question. I want to add a similar image hover affect like on http://themaxdavis.com , but for some reason I can't quite get it. I want to add to my code when you hover over the picture post (.pic), a black overlay with a 0.5 opacity to fade in over the image itself. Also, if anyone could help me figure out a way to put text inside that black overlay also like Max Davis, that would be AWESOME. Here is the code to the .pic element.
.pic { position:relative; overflow: hidden; float: left;
{block:IndexPage}width:250px;{block:IndexPage}
{block:PermalinkPage}width:500px; margin-top: 39px; margin-bottom:
15px;{/block:PermalinkPage} {block:IndexPage}margin: 15px 15px 0px
0px;{/block:IndexPage} background-color: #FFF; z-index: 1;
{block:IndexPage}box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s
ease-out;
-o-transition: box-shadow 0.3s ease-out;{block:IndexPage} }
My website URL is http://-respawn.tumblr.com
PS I'm on my way out the door now, so I will not accept the answers right away, but I will accept them and read them all as soon as I get home.
Cleaned up code:
Assuming that .pic will contain the picture as background or will be an img element.
.pic
{
position:relative;
overflow: hidden;
float: left;
width:250px;
width:500px;
margin-top: 39px;
margin-bottom: 15px;
margin: 15px 15px 0px 0px;
background-color: #FFF;
z-index: 1;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}
Create an empty div element inside .pic and give it this style.
#emptyDiv
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out;
transition: box-shadow 0.3s ease-out;
-o-transition: box-shadow 0.3s ease-out;
}
#emptyDiv:hover
{
background-color: rgba(0, 0, 0, 0.5);
}