I was able to make to rectangle surrounding my links expand as I wanted but it's a bit too fast
My new code is this:
a:link, a:visited {
background-color: #F2AA52;
color: white;
padding: 14px 25px;
text-align: left;
text-decoration: none;
display: inline-block;
margin: 0px;
}
a:hover {
width: 100%;
transition-duration: 1s;
}
I'm almost done with this but it goes to 100% width a little too fast, is there a way to make it go smoother? (instead of it going from 30% width to 100% width instantly, being able to see it progressively getting bigger in like 1.5s?)
a:link, a:visited {
background-color: #F2AA52;
color: white;
padding: 14px 25px;
text-align: left;
text-decoration: none;
display: inline-block;
margin: 0px;
width: 30px;
transition: all 0.3s ease;
}
a:hover {
width: 100%;
}
<a href='google.com'>Hi</a>
Check this out, I have replaced the padding with width. Hence the transition is working as expected
I tried using the transition: all 0.3s ease; line but it still won't give me a smooth transition, it goes from "base state" to "100% width" instantly, even though it works in your code snippet.
EDIT: now i got it working i had to give it a base width for it to work as i wanted. Thank you!
Is there a way to change my question to "Resolved"?
Related
I'm not even sure if the question title makes sense. Basically, I have a topnav that is responsive and it is working the way I want it except for at a certain point between the media breakpoints. The problem is that the name of the person in the link is too long, so it makes that tab much bigger when the screen is minimized. Any help is much appreciated!
I tried changing all px to % but it didn't fix the issue. I tried creating a new class for that specific tab as well, but it quickly became too cluttered and didn't give me the results I was hoping for anyways. I also tried adding css in the for that specific tab. I'm not sure if this is a padding problem or a font-size problem.
https://imgur.com/a/0m01w16
//default topnav CSS//
.topnav {
overflow: hidden;
background-color: #555;
color: white;
cursor: pointer;
padding: 14px 14px;
border: none;
float: left;
font-size: 80%;
text-align: center;
display: inline-block;
text-decoration: none;
width: 25%;
outline: 0;
}
//media breakpoint for tablet//
.topnav {
overflow: hidden;
background-color: #555;
color: white;
cursor: pointer;
padding: 14px 16px;
border: none;
outline: none;
float: left;
width: 50%;
font-size: 90%;
text-align: center;
display: inline-block;
text-decoration: none;
outline: 0;
}
I don't want the formatting to be out of line. I want everything in-line until the media breakpoint but that isn't happening.
I'm having an issue with creating a navigation system on my website. Once you hover over the navigation it extends to fit the categories of the website which are in a ul. I know what the issue is, because the width of the parent of the ul is too small to contain the text, the text has to shrink before the transition.
So I was wondering, is there a way to transition the text in once the width is done animating. Or are there any other solutions?
CSS:
.navigation {
width: 3.5vw;
height: 7vh;
background-color: #fcc101;
margin: 1vw;
border-radius: 4rem;
font-family: 'Work Sans', sans-serif;
transition: all 1s ease-in;
background-image: url('menu.svg');
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
position: fixed;
}
.navigation .ul a {
visibility: hidden;
opacity: 0;
transition: all 1s ease-in-out;
}
.navigation .ul {
visibility: hidden;
}
.navigation:hover {
width: 25vw;
border-radius: 3rem;
background-image: none;
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
}
.navigation:hover ul a {
opacity: 1;
visibility: visible;
}
li {
display: inline;
}
a {
color: white;
text-decoration: none;
font-size: 1.25rem;
}
.ul {
text-align: left;
line-height: 7vh;
padding-left: 2vw;
word-spacing: 1vw;
}
Here is the site.
Thanks.
One solution could be to apply an animation-delay to your ul which is >= your other animations run time. This way the animation should only fire once the other one has completed.
animation-delay: 3s;
Something similar to the above should work just fine.
Or, if you are using transitions then you can use the transition-delay property instead!
transition-delay: 3s;
Well, I spotted a couple of issues with your animation!
The first issue is, that the "contact" menu item shows up under the other menu items and that when the animation is still in progress, the menu items get under each other.
To fix this issue you need to add this:
.navigation .ul {
visibility: hidden;
position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */
width:400px; /* Set the width to whatever works for you */
}
As for delaying the animation, you can add this:
.navigation .ul {
visibility: hidden;
position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */
width:400px; /* Set the width to whatever works for you */
-webkit-transition-delay: 2s; /* You can set the delay to whatever you need */
transition-delay: 2s; /* You can set the delay to whatever you need */
}
I also think that you should maybe make the animation a bit faster and more fluid, and maybe have it on click instead of on hover.
I wanna get this:
The Target &
How it looks like
The thing is that my code goes like this:
HTML
<body>
<header>
<nav>
<h1>whiterose</h1>
<ul>
<li>home</li>
<li>us</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS:
header {
background: #5d5e62;
color: #ffffff;
font-size: 110%;
height: 7vh;
width: 100%;
opacity: 0.7;
position: fixed;
overflow: auto;
}
header h1 {
margin-left: 5%;
padding: 0.5% 0;
letter-spacing: -2px;
display: inline;
}
header nav {
display: inline;
overflow: auto;
}
header nav ul {
display: inline;
margin-left: 55%;
}
header nav ul li{
list-style-type: none;
color: #ffffff;
padding: 0 0.3%;
display: inline;
}
header nav ul li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 200%;
}
So why even if I append the and elements to the parent element (header) they still have the opacity property applied?
You need to give the opacity to the header's background, and not to it's content:
header {
background: rgba(0,0,0,0.7);
}
Check the demo in the snippet:
div {
position: absolute;
top: 0px;
background: rgba(255,0,0,0.5);
width: 300px;
height: 150px;
font-size: 50px;
color: white;
}
<img src="http://lorempixel.com/400/200/" />
<div>Your Text Goes Here</div>
You will need to use the rgba value for the background-color property.
I've created a jsfiddle with this.
jsfiddle
You can play around with the opacity value to suit your needs
If you put opacity of parent element, it's child elements will automatically get the same opacity. If you try to be smart and define opacity of child element, believe me it won't work.
So, solution here is very simple. You want your header color to be #5d5e62 with opacity 0.7. Just convert this hex value in rgb and define background color as
background: rgba(93,94,98,0.7);
That way all child elements will have opacity 1 while background color will be of opacity 0.7.
I hope this would solve your problem.
I have a logo laid out in a box at the top of my page using the following style elements:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
Which does an okay job of allowing me to position the image how I want it in an area at the top of my page (along with some other elements such as nav items). I'd like the whole thing to display without a border so it fills up the whole of the top of the browser window. I can achieve this by adding:
body {
margin: 0px;
padding: 0px;}
But when I do this it causes the image in the box to be clipped. I'm sizing the image in the html:
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
The image only clips when I add the body margin and padding, my question is: how do I get the elements at the top of the page to display so they take up the whole browser window width and go right to the top without the image clipping?
Here is the whole source, as requested:
div.imgBox {
margin: 0%;
padding: 1%;
border: 0px;
background-color: #00A7FF;
}
div.imgBox img {
display: inline;
margin: 0px;
padding: 1%;
border: 0px solid #00A7FF;
}
.hdrBox {
display: inline;
float: left;
margin: 0px;
width: 100%;
background-color: #00A7FF;
}
a:link {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
}
navBar{
float: right;
right: 5vw;
top: 10vw;
list-style-type: none;
margin: 0;
padding: 0;
}
navElement{
font-family: "Arial", Helvetica, sans-serif;
font-size: 2vw;
color: #FFFFFF;
float: right;
display: block;
width: 10vw;
border: 0.25vw solid #FFFFFF;
padding-left: 1vw;
padding-bottom: 0.25vw;
padding-top: 0.25vw;
margin: 0.25vw;
}
That's in style tags in the head section of the HTML and then some fairly simple (until I get the style sorted!) HTML in the body:
<body>
<div class="imgBox">
<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">
<navBar>
<navElement>Contact</navElement>
<navElement>Examples</navElement>
<navElement>Services</navElement>
<navElement>Profile</navElement>
<navElement>Home</navElement>
</navBar>
</div>
<div class="hdrBox">
</div>
I plan to move the style elements to a separate CSS once I've got it sorted. This works fine but when I add the aforementioned body margin padding elements to the start of this it clips the image.
This is how it displays in Firefox. Note the clipping on the text at the bottom and left of the logo, minor admittedly but still annoying the heck out of me!
I must apologise, I think it must have been my twin screen setup! It displays perfectly on my laptop when I run it in single screen mode. MASSIVE facepalm! When I reconnect the second monitor and refresh the clipping is still evident (although apparently slightly less so since a reboot so maybe Dave had something with the cache issue?) Thanks to all who've contributed and SIGNIFICANT apologies for having wasted your time on this! Really should have stripped it down to basics and tried to remove all variables before posting, I've overcomplicated the issue (gonna claim noob numpty for my lack of experience in website building as the cause).
Anyway, big thank you for being my rubber ducks (Coding Horror - Rubber Duck Problem Solving)
Tempted to give myslef a downvote for this...
I have these two images with corresponding labels: http://jsfiddle.net/Fdjtc/
I want to make it so that when I hover over one of the divs, the image animated downward and the text (initially invisible) animated downward and fades to full opacity, making the images and labels look like they do right now. How can I make sure that the images have enough space upwards to do this, and can I do this kind of animationg using CSS3's transition?
Are you looking for something like this:
http://jsfiddle.net/Fdjtc/9/
There are several ways of doing this. This example is using absolute positioning with transitions on top/bottom.
CSS:
div.wrap > img {
display: block;
position: absolute;
width: 200px;
top: 20px;
left: 20px;
-webkit-transition: top 500ms;
}
div.wrap:hover > img {
top: 5px;
}
div.wrap > span {
display: block;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: bottom 500ms;
}
div.wrap:hover > span {
bottom: 2px;
opacity: 1;
}
Edit: (after your dynamic size request)
This is another way of doing it, using margins. Text caption is a bit of problem here but you will get the idea.
Updated Fiddle: http://jsfiddle.net/Fdjtc/11/
CSS:
div.wrap {
float: left;
text-align: center;
margin: 4px;
border: 1px solid gray;
}
div.wrap > img {
display: block;
text-align: center;
margin: 16px;
-webkit-transition: margin-top 500ms;
}
div.wrap:hover > img {
margin-top: 2px;
}
Based on what you wrote, I've came up with this for you:
http://jsfiddle.net/Fdjtc/6/
I've made quite a noticeable change to your html, too:
<div>
<img src="http://placekitten.com/256">
<span>Label 1</span>
</div>
Hopefully this is what you wanted, if not, please extend your question and be more descriptive.
Is this what you wanted to achieve ?
.box img
{
-webkit-transition:all 0.5s ease-in-out;
height:200px;
display:block;
margin-top:-200px;
}
.box:hover > img
{
margin-top:0px;
}
http://jsfiddle.net/4BtcR/