I've got a menu bar that links to anchors on my page. At the moment there's content within the page which is animated to fade in using CSS3 on the initial page load but I'd like instead for them to fade in after the certain anchor link in the menu bar is clicked. How do I do that?
Eg. About is pressed then .aboutinfo CSS animation is activated.
Here is a demo to have an onclick even with CSS only (no javascript) http://jsfiddle.net/kevinPHPkevin/K8Hax/
CSS
#box1 {
display:none;
}
#box1:target {
display:block;
}
HTML
Click Me
<div id="box1">test test</div>
To do That You can use the '+' symbol
For eg.
if i want the color of a circle to change when i hover over a box then
Check out:
http://jsfiddle.net/utkarshd/Hh38R/
HTML
<div class="box"></div>
<div class="circle"></div>
CSS
.box{width:100px; height:100px; background-color:yellow;}
.circle{
width:100px;
height:100px;
border-radius:100px 100px;
background-color:orange;
-webkit-transition:all 0.7s;//for safari and chrome
-moz-transition:all 0.7s;//for mozilla
-o-transition:all 0.7s;//for opera
-ms-transition:all 0.7s;//for IE
}
.box:hover+.circle
{
background-color:blue;
}
Related
I want to fit an image with his parent dimensions. I don't want to use the image as background because is not clearly for google whether the image is using for styling or for content propose.
Anyway, i found object-fit and seems to be what I need.
My big problem now is that object-fit and hover doesn't work together as I expected.
Here is my code:
<div>
<img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>
<style>
div{
width:200px;
height:100px;
overflow:hidden;
}
div img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.5;
}
div img:hover{
opacity:1;
}
</style>
And here is my fiddle:
http://jsfiddle.net/jx0ntkmy/
Hovering several times you will see a distortion of image. I have tested in firefox and chrome. In chrome there is no problem, but in firefox it is.
I'm applying a display:none to a class. Is adding height:0 and width:0 necessary?
I've seen them being used at some places, so does it solve some bug with older browsers?
In order to completely hide an element you only need to apply display:none;. You don't need to set width or height to 0 as it will have no effect on your layout. The css display property is around since CSS1 and is cross-browser.
Check this jsFiddle Demo
HTML
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
CSS
div{
width:50px;
height:50px;
margin:5px;
background-color:red;
}
.two{
display:none;
}
If, on another hand, you use the visibility property ... the element will disappear but maintain its original position.
See demo here
CSS changes
.two{
visibility:hidden;
}
No you don't need to add height and width at all, display:none it is cross browser, you can check here
See image below for browser compatibility
see a snippet with a display:none
div {
background-color:blue;
color: white;
height: 40px;
margin-bottom:5px;
}
.none {
display: none;
}
<div>div1</div>
<div>div2</div>
<div class="none">div3</div>
<div>div4</div>
I have the following CSS:
.contact{
padding:1rem;
background:#023B6C;
padding:1rem;
position:fixed;
right:-20px;
top:27%;
z-index:99;
border-radius:5px 5px 0 0;
border:2px solid #fff;
transform:rotate(-90deg);
transition:all .5 ease;
}
.contact a{
font-size:1.2rem;
color:#fff;
transition:all .5 ease;
}
.contact a:hover{
color:#E5E5E5;
font-size:1.25rem;
}
.contact:hover{
padding:1.2rem;
}
that controls the following HTML:
<div class="contact">
Contact
</div>
What this is doing is upon hovering over the div the div slightly expands and the text also expands. However, if a person doesn't hover directly over the text the text doesn't change, just the div.
How do I modify the code so the link inside the divs changes when the div is hovered but the text is not? I tried putting all of the code inside the .contact:hover but that didn't work as the link was styled by the default styles of my css.
Here is a jsFiddle of my code.
Think about it from right to left...
Any, a - inside of .content that is on hover...
so
(from right to left)
.contact:hover a {
}
But, I would make the whole thing an anchor. make it block and style the whole thing on hover.
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 need to show an additional image once the user hovers over button. How would you go around doing this ideally just using CSS.
You can see what I need exactly on the image below, when the users hovers on the brochure button, the view brochure button appears.
with css alone, if you can put an element inside the hovered object, you can do like this:
fiddle here: http://jsfiddle.net/Q67hB/
html:
<div id="one">all the time
<div id="two">only on hovering one</div>
</div>
css:
#two{
display: none;
}
#one:hover #two{
display: block;
}
In CSS
button:hover {
background-image: url(someImage.png);
}