I'm trying to create a website design where I have a 3 by 3 grid of images, and whenever I put the mouse over a particular image, that image gets resized slightly larger than the rest. This re-size shouldn't happen instantly though; it would be a sort of fluid animation where the height and width of the image are increasing by x pixels per frame (while maintaining aspect ratio) until reaching the desired size.
I'm pretty sure this can be done in JQuery but I can't seem to find the command for it. The closest I could find is the JQuery scale effect, but that shrinks the image into nothing instead of dynamically increasing its size to some prescribed maximum.
Now assuming I got the implementation for that correct, how would I get the script to resize the images individually when the mouse hovers over them? So far I've only been able to resize all the images at once, and I'm not sure how I could fix that through the script if I gave each of the 9 images separate ids.
CSS transitions are what you need. You can adjust the timing of the change and animate any CSS property with them.
The following code will expand the image by a factor of 1/5 in 1 second when the mouse hovers over the image.
img {
width: 200px;
height: 150px;
transition: width 1s;
-webkit-transition: width 1s;
transition: height 1s;
-webkit-transition: height 1s;
}
img:hover{
width: 240px;
height: 180px;
}
Here is a rough fiddle to get you started.
Related
REFERENCE: http://www.templatewire.com/preview/landscaper/
I want to make a web page, and in that page, I want to have divs/sections each the size of the screen.
Now, I mean, the width and height of the monitor, and it won't resize again, and will stay the width and height of that monitor, regardless of the browser size, and regardless of how much content is inside it.
The link shows you what I mean, but I have a 1920x1080 browser window, you can see the top and bottom of the sections above and below it. I don't want the top and bottom of neighbouring sections to be seen if the monitor is very big, nor do I want the section to not be fully visible if the monitor's too small.
Example, say I had 5 sections like in the reference, and my browser window was 1920x1080, the overall height of that document would be 1920*5400.
(I want it to be the height of the screen minus the height on the nav bar.)
You can use Viewport units (the browser window size). 100vh is the height of the screen. If you got sections that bigger than the height of little screen you can use the min-height property and set it to 100vh.
Since you didn't place your code, this is generally example of use case:
section { min-height: 100vh;}
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Good luck!
It appears you're looking for viewport percentage lenghts.
To give any element current viewport's height, in CSS, one should use:
your-selector {
height: 100vh;
display: block;
}
If the element is a <div> or any other element with a default value of block for display, it obviously doesn't need the second rule.
See it working:
your-selector {
height: 100vh;
display: block;
transition: background-color .3s linear;
}
/* let's add a hover, for testing */
your-selector:hover {
background-color: red;
}
body {
margin: 0;
min-height: 200vh;
}
<your-selector>Test</your-selector>
Note: you can also apply viewport percentage lengths to other properties, such as min-height, max-height, etc...
Note: although default viewport is browser window, that's can change. For example, 3d transforms turn any regular DOM element into a viewport for their children, affecting behavior of viewport percentage lengths, as well as behavior of position:fixed in any of their children.
I'm working on a component that transitions an image from a start position + scale to an end position + scale (i.e. to fill up the screen). This is done with a CSS transform animation on translate and scale.
The challenge is that some of the images to transition from may be altered by component users using the object-fit property. However, it appears that the CSS translate does not maintain the object-fit property during translate.
Codepen example here: https://codepen.io/cathyxz/pen/mXgEMB
I know I could technically animate width and height, but I want to keep in line with properties that browsers can animate cheaply for performance reasons, i.e. nothing that affects layout, which leaves us with only position, rotation, scale, opacity.
References: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Is there anyway I can gradually animate my transition to "uncrop" images instead of stretching them?
object-fit is applied to the element before transformation.
Whatever the outcome of all CSS on the object, transform takes it and applies the transformation. In fact, the element is left in DOM untouched. That's why transform does not trigger a repaint (and is considered performant). Only its rendering (the composite layer) is transformed. Its rendering is stretched 4 times on X axis because of the transform. But this does not make the element 4 times wider and therefore object-fit cannot apply as you expect.
Can you gradually uncrop? Yes, but not with transform. In order to do it as cheap as possible (without triggering a repaint on subsequent flow) you need:
A parent placeholder (with position:relative) as tall as your image, to keep the space free in document flow
The element to be animated, with position:absolute. Because of this, even if you animate width, you do not trigger layout, because the element is outside of document flow.
.transform-placeholder {
height: 100px;
position: relative;
}
.transform-placeholder .object-fit {
width: 100px;
height: 100px;
animation: object-fit 2.1s infinite;
animation-timing-function: cubic-bezier(.4,0,.2,1);
}
#keyframes object-fit {
0% {
width: 100px;
}
50% {
width: 400px;
}
100% {
width: 100px;
}
}
<div class="transform-placeholder">
<div class="object-fit" style="background-image: url('https://picsum.photos/1600/400?image=857')">
</div>
</div>
<h2>Animation above does not trigger repaint on any DOM element that's outside the animated div.</h2>
Whenever I append new element the div's width will increase. I want it to act as a static one. Why don't I just put it to static pixel value? Well I need to have it working on all monitors and resolutions. I need the width of 100% so it goes to the right border and after appending it acts as the static one letting me scroll through the div.
In JSFiddle I set the width to 50% so you can see how it acts(In real environment it will be 100%) Try clicking 10 or more times on Add Tab to see what's happening. After that change the width to static one to see how I want it to behave.
fiddle
Change this code:
.l_tabs {
height: 57px;
display: block;
width: 50%;
/*Changing this to px works as i want it to work but then i have screen resolution problems TRY to set the width to 500px to see*/
background: #474544 none repeat scroll 0 0;
overflow: hidden;
}
I have an image in a table. Specifically a graph of profiling information that might be quite tall (one vertical pixel is data from one source, one horizontal pixel is one unit of time). I'ld like to specify a maximum height for the image and re-scale it vertically so that it can't extend too far down the page. But I want to preserve the width (the page can scale horizontally). i.e. I specifically want to change the aspect-ratio of the source image.
My html looks, vaguely like this and it mostly works.
<style>
img.capped {
max-height : 500px;
width : 100%;
}
</style>
...
<tr><th>Profile</th></tr>
<tr><td><img src=... class=capped></td></tr>
However if the image's width is less than the width of the string "Profile" my image gets scaled upward horizontally and vertically.
Is there a way, using CSS, to cap the vertical size of an image, resizing if necessary, but leave the width alone?
You can force the width by using min-width
img {
max-height: 100px;
min-width: 100%;
}
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>