I would like to shrink the size of an image when the mouse hovers over it. I would like to use CSS3 animations if possible. This is what I am currently doing:
#logo-icon img { width: 80px; };
#logo-icon img:hover { width: 50px; transition: width 0.2s; };
When the mouse hovers over the image, instead of it transitioning from an 80px width to a 50px width, it is transitioning from a 0px width to a 50px width.
Is it possible to get it to transition from 80px to 50px?
Try:
#logo-icon img { width: 80px; transition: width 0.2s;};
#logo-icon img:hover { width: 50px; };
http://jsfiddle.net/CxU5g/
Related
I enlarge an image by CSS as
HTML
<img src="https://www.gstatic.com/webp/gallery/1.jpg" />
CSS
img {
width: 320px;
height: 320px;
position: relative;
transition: 0.2s ease;
}
img:hover {
transform: scale(2);
}
JSFIDDLE
Instead of enlarging the scale by a given factor (here 2), how can I enlarge the photo to its original size and aspect ratio?
Instead of hovered size of 640x640, I want to show the original size of 550x368 upon hovering.
Change your :hover class to this:
img:hover {
height: auto;
width: auto;
}
or
img:hover {
height: 100%;
width: auto;
}
I want to make an animation scaling the width of a div from 0% to 100% of div's content. I can't use px to set the dimensions of the div in keyframes, because thanks to display: inline-block div's dimensions changes depending on the length of the text inside the div. I have to use percentage then.
The problem is that the percentage relates to the width of the site, not the width of the div with a text. So during the animation div expands to achive 100% of site's width and after that adapts itself to the text lenght.
How to avoid expanding the width of the div to 100% of the site and animate only the text based div's width?
Here is my code:
.expanding_div {
height: 40px;
background-color: black;
line-height: 40px;
display: inline-block;
color: white;
font-size: 20px;
font-weight: bold;
overflow: hidden;
text-overflow: clip;
padding-left: 15px;
padding-right: 15px;
position: absolute;
animation: rozwiniecie-nakladka4 700ms ease-in-out;
animation-delay: 750ms;
}
#keyframes rozwiniecie-nakladka4 {
0% {
width: 0%;
}
100% {
width: 100%;
}
<div class="expanding_div">Adam Nowak i Jan Kowalski</div>
This jsfiddle has the same code exposed here.
EDIT:
Can I use getBoundingClientRect() to somehow get the size of the div and use the size to animate keyframes? If so - how to do it properly?
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!
I'm trying to remove blur effect that is happening during scaling transition. Picture during transition is passable but this font transition is so ugly... Is there any method to fix it? I have tried with "translateY(0) translateZ(0)" but no effect at all. When the effect is done, everything is going back to normal.
.circlee
{
display: inline-block;
margin-right: 50px;
/*margin-top: 200px;*/
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px black solid;
background-image: url(http://lorempixel.com/200/200/);
transition: all 1s ease-in-out;
}
.circlee:hover
{
transform: scale(1.15);
}
<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>
From the looks of it your image is only 200px by 200px . The hover effect is causing the image to stretch which results to quality loss / blur. You can either get a higher quality image so when it stretches it doesn't lose quality for an example ...an image of 210px by 210px with a resolution of 72 pixels . OR you could make your circle 190px by 190px and scale it up to 200px on hover resulting in the exact size of your background image.
OR just change the width and height on hover instead. Example:
.circlee
{
display: inline-block;
margin-right: 50px;
/*margin-top: 200px;*/
width: 190px;
height: 190px;
border-radius: 50%;
border: 2px black solid;
background-image: url(http://lorempixel.com/200/200/);
background-size:100% 100%;
transition: all 1s ease-in-out;
}
.circlee:hover
{
width:200px;
height: 200px;
}
<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>
Works like butter!
I have a div with some images in it. When I move the mouse over one of the images, I want it to grow, when I move the mouse out I want it to shrink again. I know that there isn't a mouseout ore something like that in CSS, so I put the reverse animation into the normal style of the images. Now my problem is, that when I load the site all images do the shrinking animation.
Is there a way to do this only with CSS or do I have to use Javascript?
My HTML:
<div id="picmen">
<img src="/images/b1.png" />
<img src="/images/b2.png" />
<img src="/images/b3.png" />
<img src="/images/b4.png" />
<img src="/images/b5.png" />
<img src="/images/b6.png" />
<img src="/images/b7.png" />
</div>
My CSS:
#picmen img {
float: right;
margin: 3px 1px 3px 1px;
height: 50px;
width: 50px;
animation: shrink 0.5s;
}
#keyframes shrink {
from{ width: 60px; height: 60px; }
to{ width: 50px; height: 50px; }
}
#picmen img:hover {
animation: grow 0.5s;
width: 60px;
height: 60px;
}
#keyframes grow {
from{ width: 50px; height: 50px; }
to{ width: 60px; height: 60px; }
}
Try using:
transition-duration: 0.5s;
instead of creating #keyframe animations.
Your code would look like:
#picmen img {
float: right;
margin: 3px 1px 3px 1px;
height: 50px;
width: 50px;
transition-duration: 0.5s;
}
#picmen img:hover {
transition-duration: 0.5s;
width: 60px;
height: 60px;
}
If you want to add easing, you can use:
transition-timing-function: ease-in-out;
More information about transition css3 can be found on the w3schools website.
See it in action.
Why it works:
When you define and use an #keyframe animation, your code will run the animation every time it is seen.
A browser will read your code like this:
#picmen img{ //define all images inside 'picmen' div
... //all of the basics (float, margin)
height:50px; //set height to 50px (iff no further instructions about height follow)
width:50px; //set width to 50px (iff no further instructions about width follow)
animation: shrink 0.5s; //run an animation called shrink for 0.5 seconds
//every time this state is entered
--run animation called 'shrink'--
#keyframes shrink { //defines 'shrink'
from{ width: 60px; height: 60px; } //redefines starting width and height
to{ width: 50px; height: 50px; } //defines ending width and height
}
--end animation--
} //end image definition
transition, will only make those changes on (as the name suggests) transitions.
The first time your images are loaded, they don't go through any state changes, thus no transition.