i want to expand a div (on hover) from its parent's placement in the container to a set width that must fill my entire first row. THIS IS KINDA HARD TO PUT INTO WORDS SO this is the code in question:
#info {
z-index:2;
position:absolute;
background:#000;
color:#fff;
top:0px;
width:100%;
height:100%;
opacity:0;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s; }
#icon:hover #info {
opacity:1;
width:665px;
transition:opacity 0.5s, width 0.5s ease 0.5s;
-moz-transition:opacity 0.5s, width 0.5s ease 0.5s;
-webkit-transition:opacity 0.5s, width 0.5s ease 0.5s;
-o-transition:opacity 0.5s, width 0.5s ease 0.5s; }
and here's a fiddle with what i have so far.
as you can see, the div #info in the first square in each row expand to the width i'd like them to, and the end result is what i'd like the bar to look like within the container for every square i hover over. the next squares in the same row expand to my desired width but they expand left only- i want them to expand left AND right so that they fill up the first row like the first square's div #info on hover does.
the second option in the answer to this question: Expand div from the middle instead of just top and left using CSS is a similar concept to what i am trying to achieve but it expands from the middle to equidistant left and right lengths- that wouldn't work with my layout because of the different placements of the parent divs within their row.
and if possible, i'd like to achieve this with just css! if someone does have a javascript solution, please give me step by step instructions omg i'm horrible with javascript.
<edit>last fiddle update </edit>
If,
boxes are always same size
not too many
always 4 on each row
You can set a negative margin either way:
dispatch a different class (3 or 4) to your boxes
or use nth-child(n) in css file
DEMO with nth-child(n) method (demo updated with transition)
#icon:nth-child(2):hover #info, #icon:nth-child(6):hover #info {
margin-left:-170px;
}
#icon:nth-child(3):hover #info, #icon:nth-child(7):hover #info {
margin-left:-350px;
}
#icon:nth-child(4n):hover #info {
margin-left:-530px;
}
More boxes ? , update selectors or it might be time to uses class.
Related
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
I saw other posts about affecting other elements, when one is hovered, but can we have something like a hover-ception? For example, in my code, the description shows when we hover on the sidebar image, but when you hover on the description, the effect of hovering the image goes away. Can we like, have #sidebarimage:hover #description:hover #sidebarimage(:hover) or something? I want the image to stay faded (the effect it gets when its hovered) when my courser is on the description (whhich is over the image). I cant wrap my head around it. Thank you.
https://www.dropbox.com/s/atyrxbvs246bpmt/Screenshot%202014-11-07%2010.09.21.png?dl=0
#sidebarimage img:hover {
-webkit-transition: opacity 0.6s linear;
opacity: 0.5;
z-index:1;
}
#sidebarimage:hover #description {
margin-top:-50%;
z-index:200;
opacity:1;
-moz-transition-duration:0.6s;
-webkit-transition-duration:0.6s;
-o-transition-duration:0.6s;
}
This appears to be a bug. From the W3C specs for CSS Color:
If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
In your code, the #description has an opacity of 1, and so doesn't get assigned a position in the stacking order. As such, it gets drawn behind the image which now has an opacity of 0.5. However, if you assigned the #description a non-1 value, it appears to display correctly.
Take a look at this JSFiddle. Try setting the opacity to 1 and observe the difference. I added a red background around the #description just to make it easier to see.
For more detailed information, you could take a look at this related StackOverflow question:
css opacity affecting sibling image opacity
hi there i am currently trying to make a search box(.pullDown) that animates when you :focus on the textbox(.name) and it should change the size of the div below is the code i tried but it only changed the textbox size not the div i wondered if anyone has any advice on how to make it only change the div height i have tried experimenting with nesting classes but could not get the right results
.pullDown{
height: 150px ;
-webkit-transition: width 1s ease, height 1s ease;
-moz-transition: width 1s ease, height 1s ease;
-o-transition: width 1s ease, height 1s ease;
-ms-transition: width 1s ease, height 1s ease;
transition: width 1s ease, height 1s ease; ;
}
.name:focus, .pullDown{
display:block;
height:276px !important;
}
thanks very much for your help
p.s. i am looking for a css way to do it only if possible
So what you want to do is when the textbox is selected change the height of .search, which is a parent element of the textbox?
Unfortuantly this is not possible. Css does not support parent selection. You can do this however with javascript/jQuery so when the textarea is focused you change the height of .search.
jQuery example
Based on your fiddle, I see that there are a few errors that need to be handled correctly.
First, changing the display value of an element will have the same result as readding the element, why no transitions will ever be triggered. To solve this, you will need to make sure that the input has the same display value both before and after focus (for example block in this case).
Secondly, you are adding transitions to the container div and not the actual input element that you are changing the height of. Transitions are not inherited if that is what you are assuming. You should thus move the transition to .name instead.
Thirdly, animation should only be applied between to distinct values, especially when working with input elements who have a tendency to render rather strange between different browsers. In this case, you can for example set the height of .name to 1em or similar.
Lastly, for some reason you first set the height of .pullDown to 150px, but then you immediately after overwrites this to 276px. If you want the div to change size when the field is in focus, this is not the way to do this (actually, it's currently not possible to select the parent of an element with CSS). Comma separated selectors are entirely disjunct from each other. A solution to this can be to replace the height attribute with a min-height. This will ensure that the div expands to fit the form if it grows larger than the div.
Here's a fiddle to help you out
Hopefully this will help!
I have a problem with the CSS transition property.
I need to declare two transitions for a section-tag. Every transition with the section should have a duration of 1s, only the background should have a duration of 0.3s
So my CSS-transition code would look like that:
section{
background: black;
transition: all 1s ease, background 0.3s ease;
}
section:hover{
background: green;
transform: translateY(100px);
}
But when I hovering the link now, the background get animated in 1s and it blinks strangely.
Here the codepen Demo
Someone know why this happend? And how can I realize my goal?
And yes, I need the all property!
EDIT
Just found a strange one. In the linked codepen above, it blinks. But when I animate also the padding, it stop blinking! But the background will be animated in 1s...
Here's the second demo
I have tried this in code pen, the problem not in the transition property.
Better you use div tag for the link background and create separate transition for that.
Surely div tag will give the best solution for your problem.
The problem occurred because as you hover over the element, it starts moving downwards.
When the element is not hovered, it would revert back.
Now as you hover, the elements starts moving and then loses the hover immediately which causes it to return to original state but again gains the hover effect as it again receives the mouse-over event which also cause blink, and the strange phenomenon you observed.
If you place mouse close towards the bottom, you observe the desired effect.
The fix should be that you write a hover for the container that contains these elements and apply the effect to these elements.
Besides you've applied transition in only 1 state which also may be the reason for blink;
try using transitions to both the statements like below:
section{
width:300px;
height:300px;
background:black;
color:white;
transition: background 0.3s ease, all 3s ease;
}
section:hover{
background:green;
transition: background 0.3s ease, all 3s ease;
}
I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
Now assume I have a CSS as follows.
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
Have you tried positioning the element absolutely instead of relatively?
Use javascript to calculate it and set the css using javascript too