I'm trying to enlarge a circular element on hover to show more of the background.
I thought I managed to do it however the background moves slightly during the transition, this is what I have now:
http://jsfiddle.net/ANN32/
.foto-icono // The container
{
height: 250px;
text-align: center;
}
.foto-icono > div // The image without padding
{
border-radius: 50%;
width: 200px;
height: 200px;
padding: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.foto-icono > div:hover // More padding and a negative margin so it stays on the same position
{
padding: 20px;
margin-top: -20px;
}
I also tried changing the item height and width on hover (instead of the padding) but I randomly get a weird "tremble" from the background.
How can I do this?
As opposed to padding, i'd suggest adjusting a transparent border. This eliminates the issue on Chrome.
UPDATED EXAMPLE HERE
.foto-icono > div {
border:0px solid transparent;
}
.foto-icono > div:hover {
border:20px solid transparent;
margin-top:-20px;
}
I got it. remove text-align:center from your .foto-icono class.
here is updated fiddle: http://jsfiddle.net/ashishanexpert/ANN32/2/
Related
CODE SAMPLE HERE: http://codepen.io/colbisaurusrex/pen/YZdKyO?editors=1100
First problem:
I am trying to smoothly expand and compress a div (class: event) on hover. It expands smoothly, but it snaps back quickly when user is no longer hovering on div. I'd like to transition back at the same ease as it expands
Second problem:
Simultaneously, I'd like to reveal an inner, hidden child(class: hidden) when I hover over its parent(class: event). Ideally, I'd like to reveal it when the parent is fully expanded. And ease it back to hidden as the parent compresses. Right now, it is revealed immediately, before the parent div is fully expanded. I have tried to add a delay.
Basically, there is a beginning and ending transition that exact mirrors of each other. I'd like to do this with no Javascript
Bonus Question: If the entire transition was set off by a button click(say the Show Details button), do I have to use JS? Is there a way to do this with CSS only?
/* This is the CSS I am working with */
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out;
}
.event:hover {
height: 300px;
transition: height 500ms ease-in;
}
.event:hover .hidden {
display: block;
transition: display 300ms ease-in 1s;
}
.hidden {
font-size: 30px;
display: none;
}
/* End of css */
problem 1: transform should be transition
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out; // change this to transition
}
Problem 2: try using opacity instead of display:
.event:hover .hidden {
/* display: block; */
/* transition: display 500ms ease-in 1s; */
-webkit-transition: opacity 2s ease-in-out;
opacity: 1;
}
.hidden {
font-size: 30px;
/* display: none; */
opacity: 0;
}
demo: http://codepen.io/anon/pen/NpeWZz?editors=1100
I'm working on the metro tiles menu for website, I cant use any JavaScript only html and css.
Problem is with sliding tiles and direction of slide, furthermore when box slide next one is hiding under.
#block4 - DOWN
#block5 - UP.
#block4:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
}
#block5:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
Example on JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/
Check this out.
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all; // this dude
transition-duration: .5s; // this dude
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}
Another Demo.
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease; // right here
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
padding:5em 3em;
}
If you want block#3 to float, you must not "change" the other elements around it, since the browser will "reposition" all elements upon any change you made.
Since you said you can't use any JS in the code - there are a few ways I see you can you to handle it:
1. Make the elements fixed position. This way the none of the elements will change when you hover other elements (and change their own style).
2. Use "hidden" elements. Create new element, which is exactly as #block4 - we will call id #block4dup - same content, same position - everything is the same. It will have an absolute position and opacity: 0. the :hover you want will be on #block4dup:hover, and this will change the opacity/height and everything you need. This element will also be positioned absolute, so it will not affect your other floating elements on that page.
Not such a good solution (much duplicate content) but since you can't use any JS here they will both work and give you "good" results.
So I have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
I have the following issue with CSS :nth-child pseudo selector and I'm pretty sure I have missed something out.
index.html
<html>
<head>...</head>
<body>
<div class='selector'>first</div>
<div class='selector'>second</div>
<div class='selector'>third</div>
<div class='selector'>fourth</div>
<div class='selector'>fifth</div>
</body>
</html>
style_does_not_work.css (does not work)
.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }
style_that_works.css (for the proof of the selector concept)
.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }
I'm a little bit confused why :nth-child(2) does not work but :nth-child(even) does. Is there a difference or something I've missed out?
My goal is to give fixed positionned elements a dynamic offset from top while the elements are injected and removed by javascript dynamically.
Update / Additional
Unfortunately I've made a typo in the example above. But this unfortunately does not solve the real case - even I see the working JS-Fiddles (I'm really confused because of that...)
Additionally I've post some screens with the current issue:
CSS:
.notification-area {
position: fixed;
z-index: 999;
width: 500px;
height: 100%;
overflow: hidden;
}
.notification-area.top-right {
top: 25px;
right: 25px;
left: auto;
-webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
}
/* these lines are completely ignored */
.notification-area:nth-child(2) { margin: 125px 0px 0px 0px; }
.notification-area:nth-child(3) { margin: 250px 0px 0px 0px; }
.notification-area:nth-child(4) { margin: 375px 0px 0px 0px; }
.notification-area:nth-child(5) { margin: 500px 0px 0px 0px; }
/* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */
.notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }
You didn't close div in second .selector. Works fine:
fiddle
You missed closing tag of div in 2nd div.
Try this one :nth-child(n+1) instead of :nth-child(2)
Try changing the nth-child(n) to nth-of-type(n) since we're not working with their child nodes. I've deleted this answer before because I thought that the real problem was that you forgot to close one of your divs but you seem to haven't solve it yet so I'll post it again.