I've got (hopefully) a simple CSS problem, that I cannot get working.
If you go to http://new.therepairshack.com and take a look at the top search bar.
When you hover over it, it resizes to content width.
The CSS for this is here:
.header .search-wrapper .form-search .input-text {
background:rgba(0,0,0,0);
color:#000;
border-radius:0px;
border-bottom:1px solid #444;
}
.header .search-wrapper:hover,
.header .search-wrapper:hover .form-search,
.header .search-wrapper:hover form,
.header .search-wrapper:hover .input-text {
width:100%;
font-size:45px;
height:100px;
}
.header .search-wrapper,
.header .search-wrapper form,
.header .search-wrapper .form-search,
.header .search-wrapper .input-text {
transition: all 1.0s ease;
-webkit-transition: all 1.0s ease;
display:block;
}
Right now we're working on getting this functionality working in Chrome and Firefox. When I view it in chrome the background div instantly jumps to a larger height to fit the resized search bar, but when it resizes back down after you've left hover it does it smoothly.
My question: Is there any way to make the jumping go away? It's driving me nuts. I have added a transition to all of the elements that are moving when the search bar is being resized and that isn't working.
Also, what is the best way to get this working properly in other browsers? Thanks!!!
Let me know if you need anymore information!
It can't transition from an undefined starting point.
You must either
Specify an initial height on your .search-wrapper
http://jsfiddle.net/5h69j6uq/
Or, if your content must be dynamically sized, set the updated height by using the min-height: 100px property rather than the height: 100px property. min-height has a default value of 0 and will thus transition from that defined default value to 100px
http://jsfiddle.net/8t1beeLo/
You will have to manually set the height on the .header-top-container class and adjust it accordingly for the hover state.
CSS by standard will only apply animations to elements that are defined in rules to have them applied. And furthermore transitions will only be applied when there is a starting and end result, so inferred values such as height and width will not be animateable. Noticed I didn't say inherited values, as those technically have a starting value and therefore are animateable.
So for your CSS, you'll want something to this effect:
.header-top-container {
transition: height 1.0s ease;
-webkit-transition: height 1.0s ease;
height: 50px; /* change to whatever your height should be */
}
.header-top-container:hover {
height: 100px; /* the new height of the background */
}
Related
I've got this code...
<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->
...and this
.logo {
transition: .5s;
}
.logo:hover {
transition: .5s;
width: 128px;
height: 128px;
}
It resizes on hovering, but not with transitioning. I just hover it and it instantly resizes, and I have no idea why does transition not work.
There are several things wrong with the CSS causing it not to transition.
First, as #WaisKamal said, you need to set initial states to transition from. Images size automatically in HTML but that's not a valid starting point for CSS.
Second, you need to define WHAT properties are being transitioned.
So you would need to add width and height. Or you can use the all identifier:
.logo {
display:block; //make sure the image is a block element
width: 96px;
height: 96px;
transition: all 0.5s linear;
}
.logo:hover {
width: 128px;
height: 128px;
}
Now that will work but it's going to be kind of janky since animating height/width cause page repaints.
Instead, I would suggest using a transform on the image.
.logo {
display:block; //make sure the image is a block element
// initial size is fine here because we're using a transform
transition: transform 0.5s ease-in-out;
}
.logo:hover {
transform: scale(2) // decimal notation 2 = 200% = 128x128px
}
There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.
The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.
I have an image near the top of a webpage. I've made it so that when I hover on the image, it zooms in slightly. However, in doing so, I've messed something up that causes the image to only display one portion whether hover is activated or not. I've tried removing portions of the code I added, but can't seem to fix it without completely removing the hover animation. I've also tried changing margin, padding, and position. I'm using Bootstrap 4 if that makes a difference. I'm sure it's something simple, I just can't seem to figure out what needs to be changed.
Here's a link to the Codepen: https://codepen.io/amandathedev/pen/zyEyze
Here's the relevant portion of the CSS:
.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}
.imgCard {
position: absolute;
top: 0;
left: 0;
}
.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.imgBox:hover .imgCard img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
You need to set transform-origin to center so that it will scale from center on, so your css must look like this:
..other css
.imgBox:hover .imgCard img {
transform: scale(1.05);
transform-origin: center;
-webkit-transform: scale(1.05);
}
Looking at your code example on codepen, the solution looks to be making the width of the img 100%. So in your example you would do something like:
.photo {
width:100%
}
However, this cuts off the bottom of the image. You're going to need to adjust the height of the imgBox that contains the imgCard. It's currently set to 360px. Because of the way your example is written, it will probably be best for you to just choose a number so that the resulting image will have the same aspect ratio as the original image (playing around with it, 478px looks like the magic number to show the entire image).
I am have a table where I would like to be able to click on the table header row and that will collapse the rest of the table leaving only the header row (and expand back out). With a good deal of struggle I was able to get the table to actually change it's height on click, but haven't been able to get the animation to trigger. Here is the css that I have so far:
table {
height: 100%;
display: block;
overflow: hidden;
}
.collapsed {
animation-name: collapse;
animation-duration: 2s;
}
#keyframes collapse {
from { height: 100%; }
to { height: 40px; }
}
/* This is the javascript that is trigger on click */
this.refs.ruleslisttable.classList.toggle("ruleSetInfo__rule-list-table--collapsed");
The code above doesn't even trigger the new height when I toggle the class on the table, but has been my attempt at getting the animation in there.
You don't really need to do it with keyframe animation.
You could do it just by adding a transition rule to the table element, like this:
table {
height: 100%;
display: block;
overflow: hidden;
transition: height 2s ease-in;
}
.collapsed {
height: 40px;
}
What this does, is tell the browser to transition the height of the table from 100% to 40px and vice cersa over a duration of 2s with an ease-in function
For more info you can read the entry about the transition property at MDN
Cheers
UPDATE:
In your current setup I suppose the parent of the table element does not have a strictly defined height.
The way the percentage based height works is like this: The element gets the 100% of its parent height.
However when you do not specify a height for the parent, be it in px, em, rem, vh or what have you, the child with height: 100% is like having height: auto. Reference
And here is the actual problem: You cannot transition from auto to any other value, like %, px etc.
You can only transition from one defined value (!== auto) to any other defined value. e.g. from px to rem, etc
And this is why your transition is not working.
See this fiddle
I made. Play with the #cont element's height and see what happens.
So, in short: You will either have to give a strict height to your table, or, if you want to keep it percentage based, give a strict height to its parent element.
I am building a website and ran into another problem with my code.
I have tooltips for a huge number of images so that when you hover over them you see information in the tooltip ( which is also an image)
My Problem is that when I hover the first few images they display the tooltip different then the rest of them.
My code looks like this:
.playertooltipimg{
width: 400px;
height: auto;
}
.playertooltipimg {
z-index: 100000;
}
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
left:-80.15em;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
left:-51.15em;
top: -0.2em;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
I think it's hard to understand what I mean which is why i created this jfiddle:
BUT you have to adjust the size of the window so that the 2 white boxes can be next to each other (in a row)
http://jsfiddle.net/ZkQLV/
I know it's a lot of code, I can't figure out why it is doing this, since every other images except the first few display the tooltip correctly
Your problem is caused by the use of inline and relative styles for the a (which is the container of the preview item). inline style makes the absolute positioning of the inner span a little strange, you can see that all the items on the second row seem to work OK, it happens only to the items on the first row (except the last item). However if you set display:inline-block for the a elements, you'll see that hovering on all the items won't work now, the popped-up tooltip has always the same offset (on the left side) from the a element (which you hover on). That's because you set position:relative for the a elements. So all the offsets (left and top) of the spans (which you set to some fixed values relative to font-size with em unit) will be compared against the hovered a element's position. To fix this issue, you have to choose the same element for all the items against which the offsets are set. The most suitable item is exactly the div #playersbig which contains all the items. To choose that div as the containing block of the inner span elements (in each item), you have to set its position to relative (which you've already done) but you have to remove the position:relative applied on the a elements.
Another note is that you should use right property to position your tooltip (span element), in the hidden state the right is about 200% (because your 2 divs #championsbig and #playersbig have the same width) while in the shown state, the right should be about 100%. The exact values of right depend on the padding/space width between your 2 divs #championsbig and #playersbig, looks like it's about 4px in your case). You can also use calc function to set the exact value but it's not supported by some old versions of browsers (especially the so-called IE), so I just use 201% and 101% respectively in the demo (because the width is 400px). If the width is fixed at 400px, you can also calculate the exact values for right yourself such as 804px and 404px instead of 201% and 101%.
CSS:
a.tooltips {
/* use this to have the expected absolute positioning
instead of the unexpected behavior when using inline style */
display: inline-block;
}
a.tooltips span {
position: absolute;
visibility: hidden;
opacity: 0;
border: 5px solid white;
top:0;
/* use right instead of left, this will hide the tooltip initially */
right:201%;
transition: all 1s ease-in-out;
}
a:hover.tooltips span {
position: absolute;
/* this will show the tooltip on hovering */
right:101%;
visibility: visible;
opacity: 1;
transition: all 1s ease-in-out;
z-index: 999;
}
Demo.
Using bootstrap and trying to do a little simple css animation on hover, expanding the element to highlight it.
.text-block {
background-color: white;
min-height: 400px;
text-align: center;
transition: .1s;
margin: 1em;
}
.text-block:hover {
margin: 0em;
transition: .1s;
z-index: 99;
}
This almost looks right, as the element appears to be expanded since the margin is animated away, but it moves up the page so it appears only 3 sides of the element grow.
Is it possible to set the height on hover to the non-hover height+2em to make it appear to grow 1em in all directions within CSS?
Change margin to padding. Margin adds blank space outside of your element. Padding should give you the effect you want :D