I have a problem trying to work out a small test menu with the (for me) "new" css3. The menu should be in the footer which always is on the bottom of the View port. However, I would like to mess around with the transition effects css3 offers therefore I want to grow a point of the menu when you :hover it.
The menu points are set to float:left in a relative menu div. The transition does as intended except the height transition enlarges the element downwards and (obviously as it is the footer) out of the page.
Instead I would like the menu points to grow upward. To solve this i could change the float:left to position:absolute and add bottom:0, but I would have to horizontal position every menu point (hyperlink) manually which I would like to avoid. Since the Menu size (number of menu points) should be variable and I also don't want to use and JavaScript, I am clueless.
Here is the css and the html:
<div id="footer">
<div class="menu">
menp1
menp2
menp3
menp4
menp5
menp6
</div>
</div>
and the css:
#footer {
position: absolute;
background-color: #497044;
bottom: 0px;
width: 100%;
height: 45px;
padding: 5px; }
div.menu {
position: relative;
height: 45px;
width: 480px;
left: 50%;
margin-left: -240px; }
div.menu a {
float:left;
width: 80px;
height: 50px;
border: 3px dashed;
margin-left: 5px;
text-align: center;
-moz-transition: height 2s; }
div.menu a:hover {
background-color: white;
height: 100px; }
thanks for the advice!
http://jsfiddle.net/nqCgu/2/
You mean something like this?
You can use a negative margin-top value and margin-top transition to achieve this. Add:
div.menu { ...
transition: margin-top .2s;
-moz-transition: margin-top .2s;}
div.menu a:hover {
margin-top:-50px;
background-color:white;
height: 100px; }
Related
I'm trying to get a ribbon-like banner effect for a header:
My markup is this:
<header>
<div id="logo">
<img src="">
</div>
</header>
I was thinking I could use pseudo :before and :after elements on the <img>, creating extra white space above and below the image to fake the extended `div:
#logo-wrap img:after {
content: '';
display: inline-block;
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: #000;
}
And then another :before and :afterpseudo elements for the "shadow-fold".
My problem is: if I end up doing it like this, I'll have to insert another div between #logoand <img> in order to add another pair of :before and :after pseudo elements for the bottom "shadow-fold" and I think I'm having problems using the pseudo elements on the <img> element (nothing is appearing).
Can you shed some light and guide me on the right direction, pls? Perhaps, there is a simple way to just "shrink" the <header>?
EDIT
So, :before and :after can't be used with <img>. Thank you for the info :)
What I would like to know is if there is another way to achieve what I desire instead of wrap-wrap-wrap? :P
i.e: is there a way to make the #logo be bigger than <header> despite being its child and its height being the same (since the <header> has always the same height as the <img>)?
Thanks
I think you're on the right track. I would use borders, but I would make your pseudo-elements be behind the logo like so:
body,html {margin: 0; padding: 0;}
header {
background: #eee;
text-align: center;
margin: 1em 0;
}
#logo {
display: inline-block;
vertical-align: top;
position: relative;
margin: -0.5em 0;
}
#logo:before, #logo:after {
content: '';
position: absolute;
width: 100%;
left: -0.25em;
border: 0 solid transparent;
border-width: 0.5em 0.25em;
color: #aaa; /* set so we only have to have the border color in one place.
if not specified, border color is the same as the text
color. */
}
#logo:before {
border-top: none;
border-bottom-color: initial;
top: 0;
}
#logo:after {
border-bottom: none;
border-top-color: initial;
bottom: 0;
}
#logo img {
position: relative;
display:block;
z-index: 1;
}
<header>
<div id="logo">
<img src="//placehold.it/300x100?text=LOGO"/>
</div>
</header>
The concept is that the pseudo-elements are 100% width of the logo with a little bit extra (determined by the border attributes). Then you use both left and right borders simultaneously. There's a few other tricks in that code that help simplify it, but the general idea is to let your pseudo-elements peek out from behind the logo itself.
I have a div called main content, inside this div is another div called slideup. Using CSS animation, when you hover over the main content div, the slide up div slides up from the bottom to 50% height. This can be seen in my css code below
.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup {
min-height: 50%;
}
The hover works perfectly well, however I included the click function (.active) for touchscreen devices. I can not seem to get the click function working. Could somebody please tell me what I have done wrong?
Thanks
I am trying to implement some CSS on my website that I am having a little bit of difficulty with. I currently have five 'balls' (which are just circular divs) that have staggered heights. I have been experimenting with having the balls move around when you hover on them, which is great, but currently they only continue to move as long as you keep your pointer trained on it as it moves.
Ideally, I would like to have all five move independently when you hover in the general area. I have enclosed them in a wrapper div, but I am unsure of the code to affect the child divs when you hover on the parent. I am also not sure if I'm using the terms parent and child correctly, as I've only come across this concept in the last 20 minutes!
Here is the HTML:
<div id='demoStrip'><div id='ballWrapper'>
<div id='bounce'>
<div class='ball' id='ball1'><p>Professional</p></div>
<div class='ball' id='ball2'><p>Copy</p></div>
<div class='ball' id='ball3'><p>Just</p></div>
<div class='ball' id='ball4'><p>For</p></div>
<div class='ball' id='ball5'><p>You</p></div>
</div>
</div></div> <!-- End of demoStrip div -->
Here is the CSS as it currently stands:
#demoStrip {
width: 960px;
height: 410px;
margin: 20px auto 0 auto;
/*background: #00cccc;*/
border-radius: 20px;
}
#ballWrapper {
width: 900px;
height: 410px;
margin: 0 auto 0 auto;
}
.ball {
margin: 0 20px 0 20px;
/*width: 150px;
height: 150px;*/
border-radius: 200px;
background-image: radial-gradient(circle closest-corner at center, #FFFF99 0%, #FFFF00 100%);
float: left;
box-shadow: 5px 5px 5px #333333;
}
.ball p {
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
margin: 0;
}
#ball1 {
width: 150px;
height: 150px;
margin-top: 245px;
}
#ball2 {
width: 140px;
height: 140px;
margin-top: 185px;
}
#ball3 {
width: 130px;
height: 130px;
margin-top: 125px;
}
#ball4 {
width: 120px;
height: 120px;
margin-top: 65px;
}
#ball5 {
width: 110px;
height: 110px;
margin-top: 5px;
}
#ball1:hover {
margin-top: 5px;
transition: margin-top 3s;
}
#bounce:hover ~ #ball2:hover {
margin-top: 65px;
transition: margin-top 3s;
}
The very last bit of code is my attempts to make ball2 'bounce' when hovering on the 'bounce' div. At the moment it doesn't work, but I'm sure syntactically it is all wrong. Any advice would be much appreciated!
Write your CSS so it affects the balls inside a hovered div:
#bounce:hover .ball {
...
}
Or, if you need different CSS for each ball:
#bounce:hover #ball1 {
...
}
#bounce:hover #ball2 {
...
}
...
Give the hover a 100% width/ height
#ball1:hover {
width:100%;
height:100%
margin-top: 5px;
transition: margin-top 3s;
}
#bounce:hover ~ #ball2:hover {
margin-top: 65px;
transition: margin-top 3s;
width:100%;
height:100%
}
Ideally, I would like to have all five move independently when you
hover in the general area...
So do something like this:
#demoStrip:hover #bounce .ball:nth-child(1) {
//animation here
}
This should fix your second issue of...
currently they only continue to move as long as you keep your pointer
trained on it as it moves
If you still run into that issue then set them both to position: relative and set each element's z-index, but be sure to set the .ball to a higher z-index. See Submenu does not stay open for more on why.
Your last attempt wasn't too far off, but instead of
#bounce:hover ~ #ball2:hover {...}
use
#bounce:hover #ball2 {...}
this will
make ball2 'bounce' when hovering on the 'bounce' div
You do not need the second :hover on #ball2, nor do you need the tilde (~).
In CSS the tilde (~) symbol is the 'general sibling' combinator. See this article for a great intro to CSS selectors/combinators http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could use the tilde to hover #ball1 and animate #ball2 (providing #ball2 is after #ball1 in the DOM) like so:
#ball1:hover ~ #ball2 {
margin-top: 65px;
transition: margin-top 3s;
}
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I have divs that grow heightwise on hover and on hover I want them overlap all other divs, and not push them like in my example.
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
height: 80px;
-webkit-transition: all 0.25s ease;
}
http://jsfiddle.net/MrSlacker/5wa3X/
You can make some divs that act like rows for each three divs and set it with position:absolute and z-index.
Check this link http://jsfiddle.net/5wa3X/5/
If they're all going to have fixed dimensions like in your example, position them all absolutely inside a container with position relative; this takes them out of the flow and they won't push any other content.
Well the obvious answer would be for you to use position: absolute for the container, and then position: relative with each one of those divs, so they don't affect each other's positions with the box-model. But that would mean for you to manually position them (each one) so they look like they're stacked...
But maybe there's a way around it using z-index. It would make sense that by sending the container to a lower z-index and allowing overflow, that the children would somehow "hold their ground"... but a quick experiment lead me nowhere. Will try to play with it more later :)
You should use position: absolute with some positioning classes.
http://jsfiddle.net/5wa3X/6/
and I play with Ricardo code..
use
.container div:hover {
height: 80px;
z-index:10000;
background-color:#ff0000
}
your issue get solved..
Credit goes to "RICARDO"
#container{
width: 300px;
}
#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}
#container .color1{
background: #444;
}
#container .color2{
background: #555;
}
#container .color3{
background: #666;
}
#container .color4{
background: #777;
}
#container .color5{
background: #888;
}
#container a div:hover{
/*height: 80px;*/ /*No need to specify width in hover*/
-webkit-transition: all 0.25s ease;
}