I'm trying to increase the width of a div on hover while the height stays the same. This is tough because I get the height from padding-top: 100% which allows it to be a resizable square. So naturally as I increase the width the height organically increases too. (It is important the div height and width are equal in its normal state so it's a perfect square)
I'm now lost and unsure how to achieve this, any input is appreciated.
https://jsfiddle.net/9tc2mbwd/2/
.work-container { padding-top: 100%; }
If you don't want to set fix width and height into .work-wrapper, then..
Make the .work-container the hovered element, and do like this:
.work-wrapper {
width: 30%;
}
.work-container {
padding-top: 100%;
width: 100%;
transition: all ease 0.5s;
}
.work-container:hover {
width: 200%;
}
.work-1 {
background-color: #FEF102;
}
<div class="work-wrapper">
<div class="work-container work-1">
</div>
</div>
You can use viewport units and get rid of work-wrapper, like this:
.work-container {
width: 30vw;
height: 30vw;
transition: all ease 0.5s;
}
.work-container:hover {
width: 50vw;
}
.work-1 {
background-color: #FEF102;
}
<div class="work-container work-1">
</div>
Well, you can start off by getting rid of the percentages and adding this to " .work-wrapper":
width:150px;
height:150px;
overflow: hidden;
and keep everything the same!
Hope this helps!
Related
I am trying to figure out how to implement the carousel like in this website. I tried using the exact same image from the given website and did something like
div{
height: 780px;
}
img{
height: 100%;
width: 100%;
}
<div>
<img src = 'xxx'></img>
</div>
Of course, this will not work as expected since it will change the aspect ratio of the image thus messing with its quality. I think what they did was somehow only make the image sized as something like 700px * 780px, then extend it horizontally using just the background color.
You are absolutely right.
On that site, they are setting the height of the image to 480px and setting the width to auto
The img is contained in a div. That div has the background-color set dynamically by JavaScript. They are using color values associated with each slide's background color.
.img-container {
background: #f5a738;
width: 100%;
height: 200px;
text-align: center;
}
.img-container img {
height: 200px;
}
<div class='img-container'>
<img src='https://i.stack.imgur.com/h2STW.png' />
</div>
Here's an example with a different background color so you can see where the image ends:
.img-container {
background: #a33;
width: 100%;
height: 200px;
text-align: center;
}
.img-container img {
height: 200px;
}
<div class='img-container'>
<img src='https://i.stack.imgur.com/h2STW.png' />
</div>
You can use object-fit: cover to maintain the aspect ratio of images inside their containers.
The width of the box can change to anything while the image expands and contracts to cover it's parent element.
Added the animation for visuals only. Of course in your project you could set any width that makes sense.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, img {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
border-style: solid;
width: 10rem;
height: 10rem;
animation-name: expand;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
img {
object-fit: cover;
object-position: center;
}
#keyframes expand {
100% {
width: 30rem;
}
}
<div>
<img src='https://i.imgur.com/0Zn5PLC.png'>
</div>
I am having issues coming up with a way to make a child have transitionable width while making the parent change instantaneously.
Using the following example:
.parent {
height: 100px;
width: 25%;
background-color: blue;
}
.child {
width: 100%;
transition: width 1s;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
<div class="parent">
<div class="child">
</div>
</div>
When .parent is hovered, its width should increase, and then the child should take 1s to catch up to the parents width.
Is there any way to achieve this? I don't want the parent to transition as it will cause a lot of jumping around as the parent grows instead of moving everything at once.
You can't use transition, since the child's width value doesn't actually change - it was 100% before and 100% after.
In this case you can use an animation that will start from 50% if the new width, and proceed to the 100%. If the hover ends, the child width will go back to the parent's width immediately.
.parent {
height: 100px;
width: 25%;
background-color: blue;
}
.child {
width: 100%;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
.parent:hover .child {
animation: 1s both grow;
}
#keyframes grow {
from { width: 50%; }
to { width: 100%; }
}
<div class="parent">
<div class="child">
</div>
</div>
So keep in mind that div elements are block elements. They will fill the full-width of their parent unless you style them otherwise.
This makes using percentages problematic without adding a keyframes animation. Though there is nothing wrong with defining an animation.
But if you give exact widths with other types of css units, you can achieve the affect by also changing the width of the child when the parent is hovered.
Below I changed the parent width to 25vw and assigned the same width to the child. Then, when the parent is hovered, change the child width to 100% will cause it to transition.
In the original case, you were only changing the parents width, and the child's width never transitioned because in both states of the parent, its value was 100%.
.parent {
height: 100px;
width: 25vw;
background-color: blue;
}
.child {
width: 25vw;
transition: width 1s linear;
background-color: red;
height: 50px;
}
.parent:hover {
width: 50%;
}
.parent:hover > .child {
width: 100%;
}
<div class="parent">
<div class="child">
</div>
</div>
The issue is that you're child's width is technically not changing. It remains 100% of the parent's width, so though it's physical size as constrained within the parent changes, it's relative width value is still 100%, so no transition is being applied to it.
Using vw units will allow you to create a fluid layout with the width values being relative to the viewport (window) width instead of the containing div.
.parent {
height: 100px;
width: 25vw;
background-color: blue;
}
.child {
width: 25vw;
transition: width 1s;
background-color: red;
height: 50px;
}
.parent:hover, .parent:hover .child {
width: 50vw;
}
<div class="parent">
<div class="child">
</div>
</div>
I'm trying to set up a system where users can change the size of a displayed image/text combination (think "Exhibit #.#" sort of thing) where the image will scale down to whatever size it needs to without pushing the surrounding content outside of the containing . However, everything I've tried has one problem or another, and given that the images I'm working with can be all kinds of sizes, I need a solution that will handle all cases.
This seems like an easy problem but, for whatever reason, I'm completely stumped.
Here's a JSBin with animated sizing to better illustrate my problem: https://jsbin.com/sezimudedi/1/edit?css,output
The html/css I'm working from:
body div {
text-align: center;
}
#keyframes movingbox {
0% { height: 100px; width: 100px; }
25% { height: 500px; width: 100px; }
50% { height: 500px; width: 500px; }
75% { height: 100px; width: 500px; }
100% { height: 100px; width: 100px; }
}
div.divblock {
display: inline-block;
border: 2px dotted red;
margin: auto;
padding: 10px;
text-align: center;
animation: movingbox 8s linear infinite;
}
div.divblock div {
width: 100%;
height: auto;
}
div img {
max-width: 100%;
max-height: 100%;
}
div.divblock h6 {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div class="divblock">
<h4>Header Text</h4>
<p>The quick brown fox jumped over the lazy dog.</p>
<div>
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=ea71a5211a91&a">
</div>
<h6>This is a test.</h6>
</div>
</div>
</body>
</html>
Look this jsbin (just drag the red box corner to resize). When you set height of image parent block to auto, like this:
div.divblock div {
width: 100%;
height: auto;
}
you make this block height depends of it's content height (img element), from other side, you want image width and height to be equal to it's parent block sizes, using this code:
div img {
max-width: 100%;
max-height: 100%;
}
All this conditions met in your jsbin sample, but if you'll add an outline for your image container, you will see it's height remains constant (equal to your image height). So the problem here not in image (it resizes fine), but in image block height.
Image block height changing problem caused by the difficulty to calculate what part of parent container's height must be used as image block height after you change the parent container's height with your animation. You have also some content with constant height in your parent container, so on each changing of it's height the height of your image container must be calculated as (100% - height_of_constant_content).
My solution is to use css calc() function, but take in account it's support in browsers. Also you can recalculate your image container height using some js.
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}
I am aware of the image resizing technic of changing image proportions based on width:
img{
max-width: 100%;
height: auto;
}
I need to do the same thing only based on the height of the parent, not the width. I have tried the following with no effect:
img{
width: auto;
max-height: 100%;
}
I hope I explaining this well enough.
Please help :)
max-height will only restrict the height to be less than the given value.
If you want it to be the same as its parent.. give it as height: 100%
hence this should work:
CSS:
img{
height: 100%; // changed max-height to height here
width: auto; // this is optional
}
You cannot effectively base it on the height using standard css techniques, but you can make the height relate directly to the width of the image for a more flexible layout. Try this:
img {
position: relative;
width: 50%; /* desired width */
}
img:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
i have tried this and it worked .
<div class="parent">
<img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>
.parent {
width: 100%;
height: 180px;
overflow: hidden;
}
see it here
https://jsfiddle.net/shuhad/vaduvrno/