Below is the code for a div inside a div sliding up to 50% using a css transition. I am having a problem though with my classes and id. The CSS is correct however I can not get it working, could somebody please tell me where I have gone wrong?
Thanks in advance.
CSS
<style>
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
bottom:0;
max-height:0;
overflow:hidden;
background:blue;
transition:max-height 250ms ease-in;
}
.maincontentdiv:hover {
max-height:50%;
}
</style>
HTML
<div class="maincontentdiv">
<div class="slideup"></div>
</div>
It works fine when I used div and div div instead of classes and id, but when I try to use classes and id it stops working so I dont think it would be the actual code :)
http://jsbin.com/slideUpUsingMinHeight/
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
width:100%; /* Absolute el. loose width so... */
bottom:0;
min-height:0; /* Use min- height instead */
background:blue;
transition: min-height 250ms ease-in; /* target min-height respectively */
}
.maincontentdiv:hover > .slideup { /* hover el > children selector */
min-height: 50%; /* and animate! */
}
You have to define the width&heightof the small div.The property max-height just sets a limit to the height,not defines it.
Secondly you need to hover the big div,not the small one,cause it's width and height are both 0,how can you hover it?
Demo
Hope this will do some help.;-)
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
Have a parent div and 3 child div's. Know the height of child2 only. Want the child1 and child3 to have the same height as height getting reduced. Also border of the parent is collapsing. Want the border of parent to be visible around the child.
Pasted the code http://jsfiddle.net/586Cr/
Provided the code below.
<html>
<head>
<style>
#parentt{
background-color:#000000;
border:4px solid #0000FF;
}
#child1{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:25%;
}
#child2{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:30%;
height:100px;
}
#child3{
background-color:#000000;
border:4px solid #FF0000;
width:25%;
float:left;
}
.trans60 {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
}
.trans100 {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
</style>
</head>
<body>
<div id="parentt">
<div id="child1" class="trans60"> child1</div>
<div id="child2" class="trans100">child2</div>
<div id="child3" class="trans60">child3</div>
</div>
</body>
</html>
Give overflow:hidden to your parent here the fiddle because child's are floating.
Briefly
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
Ok let's start off!
Anytime you float, it tends to break the parent. I know, children leave the parents broke.. it's just a habit we have in nature.
To fix this, I always make a class called 'clear' and just attach a div when I want to do clearing! I find this to be more useful than doing an overflow: hidden, as the clear class can be reused nearly any and everywhere.
//css
.clear { clear: both; }
// calling it up after the 3 children
<div class="clear"></div>
Ok, so that fixes that problem.
Now to do the div height, that's not overly complicated with some jQuery.
Now I could go on trying to explain this, but it would take a minute. Follow this tutorial:
Demo:
http://www.cssnewbie.com/example/equal-heights/plugin.html
Article:
http://www.cssnewbie.com/equalheights-jquery-plugin/#.UoX-neKrTIU
However, instead of on click, do it at document ready.
I have a div with some text in it and "on hover", I want to display another div with some other text.
The problem is that the text from the first div comes through to the second and everything seems mingled up. I would like the second div to completely cover the first one.
Here is the jsfiddle
HTML
<div class="outer_box">
<div class="inner_box">
Main</div>
<span class="caption">Caption</span>
</div>
CSS
.outer_box {
width:100px;
height:100px;
background-color:orange;
}
.inner_box{
width:100px;
height:100px;
position:absolute;
}
.caption {
width:100px;
height:100px;
background:black;
color:rgba(255,255,255,1);
opacity:0;
}
.outer_box:hover .caption{
opacity:1;
}
Thanks!
.inner_box:hover {
opacity: 0.0;
}
You need to style the text from the first div so that it disappears on hover:
.inner_box:hover .text {
visibility:hidden;
}
Add this to your CSS:
.outer_box:hover, .inner_box:hover {
opacity:0;
}
If you will notice, I made sure to include the .outer_box:hover selector in case your intention ever was to make the outer box significantly larger than the inner box.
More useful information about the behavior of the opacity property can be found here: http://www.w3schools.com/cssref/css3_pr_opacity.asp
I want to create an animated HTML "marquee" that scrolls back and forth on a website:
<div class="marquee">This is a marquee!</div>
and the CSS:
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
#-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
EDIT: Oddly, this does not work:
50% {right: 0%}
Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
You could simply use CSS animated text generator. There are pre-created templates already
Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>
HTML
<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>
CSS
.wrapper{
max-width: 400px;
background: green;
height: 40px;
text-align: right;
}
.marquee {
background: red;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
see the demo:- http://jsfiddle.net/gXdMc/6/
I like using the following to prevent things being outside my div elements. It helps with CSS rollovers too.
.marquee{
overflow:hidden;
}
this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.
If I understand you question correctly, you could create a wrapper around your marquee and then assign a width (or max-width) to the wrapping element. For example:
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
And then #marquee-wrapper { width: x }.
I am not sure if this is the correct solution but I have achieved this
by redefining .marquee class just after animation CSS.
Check below:
<style>
#marquee-wrapper{
width:700px;
display:block;
border:1px solid red;
}
div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}
#-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{
left:700px; top:0px
}
</style>
<!-- HTMl COde -->
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>
How can i only impact the opacity of a parent element and not its children
eg,
i want signup_backdrop opacity to be set at 0.5 but it's child element signup_box i don't want to have any opacity at all but it will apply the opacity set in signup_backdrop as inherited.
You can't. You'll need to super-impose (positioning, and z-index) the children over the parent, meaning they will no longer be children. That, or use transparent PNG's for the parent background, and set opacity for any siblings of the fully-opaque child.
*untested, but should be good.
.signup_backdrop {
position:fixed;
top:0; left:0;
background:#333333;
width:100%; height:100%;
z-index:10;
}
.signup_box {
position:fixed;
top:25%; left:25%;
background:#ffffff;
width:50%; height:50%;
z-index:20;
}
<div class="signup_box">
<p>Hello World</p>
</div>
<div class="signup_backdrop"></div>
In CSS 3 you have rbga() to add a color and opacity to a certain element.
It is so far implemented in Safari 3 and Firefox 3 only.
For other browsers use the tricks from Jonathan Sampson's answer.