I have the following CSS code:
.special {
height: 20px;
width: 125px;
border-bottom: 0px #69D2E7;
border-radius: 10px 10px 0px 0px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
opacity: 0.5;
transition-property: opacity;
transition-duration: 500ms;
text-transform: uppercase;
right: 0px;
position: fixed;
bottom: 0px;
z-index: 6969;
}
.special:hover {
tranisition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px #69D2E7;
}
I'm trying to make it so when hovered, it gets bigger (border-bottom height increases), and opacity changes. Opacity does, with the element I have, but the height doesn't increase. What am I doing wrong ?
http://jsfiddle.net/7U3xn/
Here's an example to see how it works.
You need to add a border-style. For instance, you can use solid:
UPDATED EXAMPLE HERE
.special:hover {
transition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px solid #69D2E7;
}
Also, fix the typo as MarcB points out. It should be transition not tranisition.
tranisition: opacity 500ms, border-bottom 500ms;
^^---typo
Syntax errors in CSS blocks kill the rest of the css directives BELOW the error. If you'd bothered looking at your browser's developer console (e.g. shift-ctrl-J) in Firefox, you'd have seen the CSS error...
Related
i have a problem to use transition on a styled anchor.
it should expand to a higher width and show a glyphicon. i tried it width max-width but i think i miss something. the glyphicon works but not the "animated" width.
html:
<a class="link" href="/"> Order <a/>
css:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: max-width 1000ms ease-in-out;
-webkit-transition: max-width 1000ms ease-in-out;
-moz-transition: max-width 1000ms ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
https://jsfiddle.net/Lg7kutpp/
Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.
Easy way to fix with your code is to add transition:all.
Check this:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order></a>
I you just want to go with the transition only for the width property, you should add display:inline-block and a width property to the anchor class.
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;
display: inline-block;
text-align: center;
padding: 10px 15px;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
width: 150px;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order</a>
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
transition: 1000ms ease-in-out;
-webkit-transition:1000ms ease-in-out;
-moz-transition:1000ms ease-in-out;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
You should add the transition on the hover selector without max-width
https://jsfiddle.net/Lg7kutpp/1/
I believe you need to set max-width to something less than 100% in a.link.
What you're currently doing is setting max-width to 100% on hover, but the default setting of max-width is already 100%.
Either set max-width to something less than 100% under a.link, or set max-width to something greater than 100% under a.link:hover.
When it comes to the transition-property, you might as well write transition: all 1000ms ease-in-out rather than transition: max-width 1000ms ease-in-out, as using all will make sure that any animation on a.link will have the same properties.
Also, I'd recommend you don't use href="/" unless you intend to direct the user to the main page. If you just want an anchor that doesn't link anywhere, you can drop using href.
Hope this helps.
Here's the page upon which I'm working.
I'm using Shortcodes Ultimate to get the columns, and it's responsive. Now I'm trying to get a text hover with background over the images, preferably without JS for now. I can get it to hover perfectly if it's given defined height and width, but then that's not responsive.
On CodePen, it shows the title going all the way across the page, but the Shortcodes Ultimate columns eliminate that. But it probably isn't best design, either.
I've followed about 20 different tutorials to get where I am, but am stuck now.
CodePen
HTML:
<div id="portfolio_hover_wrapper">
<a href="#" class="wistia-popover">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span>
</a>
</div>
CSS:
#portfolio_hover_wrapper {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#portfolio_hover_wrapper a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: table;
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
opacity: 1;
}
span.portfolio-hover-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If I understand what you want try using top: 50%; transform: translateY(-50%); in .portfolio-hover-text.
My bad I misunderstood your question, try adding the following:
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: block;
font-size: 3em;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover-text span{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
In order to overlay text over an image I like to set the parent DIV to have the image as a background and child the text to it like such
<div class="box image1">
<div class="overlay fade">
<span class="text">ADO Rowing</span>
</div>
</div>
CSS
.box {
width: 75%; /*To make it responsive*/
height: 40em;/*Height should be fixed*/
box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/
margin: 5% auto 0 auto; /*Centers the div*/
border-radius: 5px; /*just for looks*/
overflow: hidden; /*Needed if our text overflows*/
}
.image1 {
background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/
background-size: cover;/*Makes the background look responsive*/
background-position:center;/*for looks*/
}
Now we need to style the overlay. More CSS
.overlay {
background: rgba(33, 150, 243, .6);/*Overlay color*/
text-align: center;
padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/
height:25%;/*Change this to 100% for whole image*/
opacity: 0;
margin: 25% 0 0 0;/*Moves the banner down*/
box-shadow: 0 2px 7px rgba(33, 150, 243, .4);
}
.text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
}
Padding will increase the div size and thus increase the color size, while margin will just space the div out without changing the size of the background, so I use margin to position and padding for sizing.
lastly we need to make some snappy animation on :hover
.fade {
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.box:hover .fade {
opacity:1;
}
That will change the opacity from 0 to 1 on hover with a .25s tranisition. That should be about it, hope that helps. View the CodePen Here
I am trying to recreate an effect I saw on "TheButton" subreddit. You can see that next to most usernames there is a colored dot that when hovered over expands and reveals some underlying text.
Using their CSS as a starting point, I can recreate this effect but my issue is that the underlying text I have does not collapse, so I never achieve a "dot" shape while the user is not hovering.
Here's my CSS:
* {
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.flair {
min-width: 12px;
max-width: 12px;
height: 12px;
line-height: 12px;
border-radius: 12px;
border: none;
overflow: hidden;
padding: 0;
vertical-align: middle;
font-size: 10px !important;
-webkit-transition:all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
position: relative;
}
.flair:hover {
max-width: 500px;
padding: 0 5px;
color: #fff;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.flair-no-press {
background:#888;
color:#888;
}
And here's my HTML:
<span class="flair flair-no-press" title="non presser">non presser</span>
Here's a jsfiddle showing what this looks like. Once again my intended effect is simply making the dot collapse entirely when not being hovered over like they have.
What am I missing here?
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
I am new to css and html and have a very small question. I am trying to add a opacity transition to description of an image when mouse hovers over. But it's currently not working and I am not sure why.
code:http://jsfiddle.net/3VHvM/
my html code:
<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/>
<div class = "img-overlay">
<h3>Typography</h3></div>
</div>
my css code:
.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}
.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}
.bucket img {
width: 100%;
}
Thank you for your help
1/20th of a second is too fast to see the effect. Try 2s instead.
http://jsfiddle.net/3VHvM/1/
.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 2s;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
}
it's working - just too fast for eye to see, you need to decrees the transition speed, try 1s.
this option sets how long will take to the animation to run, 0.05s (s=seconds) it much to fast.
here:
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
your code is correct. Just the time is too less. try 0.5 sec. you will see the output.
The transition may not even be noticeable unless its .5s or slower. Quentin is right .2s is the fastest that it is noticeable if you're looking for it but if you want a viewer to pay attention to it, you should consider going even slower.