I want to toggle this div to expand and collapse on click. The transition for the expand works, however I cannot figure out how to transition the collapse. I would like to use max-height in order to have dynamic (large or small) content inside of my div.
div.component.html
<div
[ngClass]="{'expand': divClass, 'collapse': !divClass}"
(click)="divClass = !divClass"
class="a">
</div>
div.component.css
.a {
width: 400px;
height: 100px;
max-height: 100px;
transition: max-height 1s;
}
.expand {
background-color: red;
height: 500px;
max-height: 500px;
}
.collapse {
background-color: red;
max-height: 100px;
height: 100px;
transition: max-height 1s;
}
I just changed the transition to transition-duration..just css stuff
div.component.css
.a {
width: 400px;
height: 100px;
max-height: 100px;
transition-duration: 1s;
}
.expand {
background-color: red;
height: 500px;
max-height: 500px;
}
.collapse {
background-color: red;
max-height: 100px;
height: 100px;
transition-duration: 1s;
}
And here is the Demo and the StackBlitz I forked showing it working
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
working on SCSS transition I made two classes trigger and box and while hovering on trigger box should start moving and rotating.
.trigger {
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 25% 25%;
&:hover {
.box {
transform: translate(200px, 150px) rotate(20deg);
}
}
}
.box {
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
the effect works fine on chrome
[1]: https://i.stack.imgur.com/E2CnC.png
however Firefox scales the trigger borders
[2]: https://i.stack.imgur.com/6OVW4.png
the jade code
.trigger
.box
I added position: relative to .trigger and position: absolute to the box. I didn't have your html so I took a guess at what it might look like. this solution seems to work at least in codepen (I viewed in Chrome and Firefox and both are working). I had to modify your scss to css in this example in order to tinker with it in codepen and post here.
.trigger {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 5% 25%;
}
.trigger:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
.box {
position: absolute;
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
<div class="trigger">
<div class="box"></div>
</div>
How can I zoom an image that is inside an div on hover using CSS (zoom only the image, not the div).
See what I'm talking about here
Some minor modifications of #tim-klein answer to get effect from video
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
transition: all 2s ease-in-out;
}
.container:hover img {
transform: scale(2,2)
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
You can accomplish the general idea by using the :hover pseudo-class. Note: I didn't go overboard with keeping the img centered or using a transition to mimic the slow zoom, however, you could easily add those features if desired.
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
}
.container:hover img {
width: 120%;
height: 120%;
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
Couple of different ways to tackle this.
Demo: https://codepen.io/shanomurphy/pen/BvMrWq?editors=1100
1. Using background-image
HTML:
<div class="zoom-bg"></div>
CSS:
.zoom-bg {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-bg:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url('https://placeimg.com/300/200/nature') no-repeat center;
background-size: cover;
transition: all .3s ease-in-out;
}
.zoom-bg:hover:before {
transform: scale(1.2);
}
2. Using nested image and object-fit
Basically the same as #Alx Lark's answer but adding object-fit to maintain the aspect ratio of the image.
HTML:
<div class="zoom-img">
<img src="https://placeimg.com/300/200/arch">
</div>
CSS:
.zoom-img {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-img > img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
.zoom-img:hover > img {
transform: scale(1.2);
}
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 0.5s ease;
}
.box:hover + .circle {
opacity: 1;
}
<body>
<div class="box">
</div>
<div class="circle">
</div>
</body>
Here, when I hover over .box, .circle fades in in 0.5s.
Now when I move my cursor away from .box, I want .circle to fade out at a different speed (say, 1s). How to make it happen?
You need to set the off duration on the non-hover state, and the on duration on the hover.
That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply.
Once you hover off, the properties set on the normal element apply.
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 2s ease;
}
.box:hover + .circle {
opacity: 1;
transition-duration:0.5s
}
<div class="box"></div>
<div class="circle"></div>
there.I want to enlarge my div toward 2 directions left and right.But my div goes only to the right.How can i fix that? Here is my code.Thanks for help in advance.
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function:linear;
}
div:hover { width: 300px; }
<div></div>
Try this:
div {
width: 100px;
height: 100px;
background: red;
margin-left: auto;
margin-right: auto;
transition: width 2s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
}
<div></div>