I've been trying to create a button which would have its font size increased if it's hovered. And it works, but the problem is that the box itself becomes bigger when the font becomes bigger. One solution could be to have a fixed height, but I need it to stay as auto.
But once the font size changes, the box height won't change automatically anymore and instead would stay the same size.
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
Set the line-height of the font size so it would stay the same even the font is change.
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 16px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
You can achieve this simply, by adding line-height: 20px; to #btn
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 20px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
Can you wrap it in a fixed size div? One way or another, it seems you'll need to fix a bounding container (either the button itself or a div).
Alternately, you can get a similar effect by increasing the font while simultaneously decreasing the padding.
Try this Thomas!
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 22px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
Related
Have the following class
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
Am trying to add a transition/transform to either the font-size or color in order to make the hover effect less jerky. Have been unable to find anything that discusses those two elements in regards transition. Any help would be appreciated as this is a non-commercial project for big Sis's recipe site ... yeah the net needs another one of those but in her defense non-gluton recipes only.
Sorry forgot to mention the font-size is 12px and font-color is a sort of grey if not hovered over
I just added these lines and hope it helps you:
font-size: 12px; (To set the font size)
transition: .5s font-size, 1s color; (Means 0.5 seconds to changing the font-size and 1s to changing the color of the link)
color: grey; (To change the text color)
text-decoration: none; (To remove the underline of the link)
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
transition: .5s font-size, 1s color;
color: grey;
text-decoration: none;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
<div class="home-cards">
Test
</div>
You can choose which properties you want the transform to apply to.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
a {
font-size: 12px;
color: grey;
transition: font-size 0.5s ease, color 0.5s ease;
}
a:hover {
font-size: 16px;
color: red;
transition: font-size 0.5s ease, color 0.5s ease;
}
My Link
If you have a different element tag inside of your anchor tag for example:
<p style="display: inline; margin: 0;">test</p>
Try different css selector:
.home-card a:hover p{
font-size: 14px;
color: red;
}
You may want to remove extra margin from p tag...and make it display inline since p tag is a block-level element.
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
I have this css transition, I want to make disappear a div right to left and that the width is reduced little by little:
.disapear {
transition: width 1s ease-in;
width: 0px;
}
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
}
the effect is not animated, and the element disappears abruptly
this is my html:
<div class="img-thumb">
<img src="myimage.jpg">
</div>
the class .disapear is added after clicking on the element
what would be the right way to do it?
As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
transition: max-width 1s ease-in;
overflow:hidden; /* add these 2 */
max-width:100%; /* may want to change this to be width of your image to remove the delay from the beggining of the animation */
}
.disapear { /* this needs to appear after the above style */
max-width: 0px;
border: 0; /* hide border */
}
<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
<img src="http://via.placeholder.com/100x100">
</div>
I have a little problem here;
Here's my code :
.big-header {
font-size: 120px;
font-weight: bolder;
color: #fff;
text-align: left;
padding-left: 139px;
}
#media (max-width: 480px) {
.big-header {
font-size: 40px;
}
}
Everything works the way I want it to, but there's a real smoothness problem, I mean is there a way for the font-size to resize smoothly as the width is down? When I resize my window it goes directly from 120px to 40px. Is there a way font-size could slowly decrease?
Thanks a lot!
Add a css transition to both the type and when the type shrinks: transition: all 2s;
Sample: http://jsfiddle.net/chfhd5L0/3/
.big-header {
font-size: 120px;
font-weight: bolder;
text-align: left;
padding-left: 139px;
transition: all 2s;
}
#media (max-width: 480px) {
.big-header {
font-size: 40px;
transition: all 2s;
}
}
<p class="big-header">Hello</p>
I've added a new widget to my blog http://kasperikoski.blogspot.fi, which basically works as a menu by using "Add HTML/Script". The code is to bloggers HTML/CSS:
.menukadn {
line-height: 1;
}
a.limeka, a.limeka:visited, a.limeka:active {
font-family: 'Maven Pro', sans-serif;
font-size: 30px;
font-weight: bold;
color: #bbb;
text-decoration: none;
text-transform: uppercase;
transition: color 150ms linear;
letter-spacing: -0.090em;
}
a.limeka:hover {
color: #21a97e;
transition: color 150ms linear;
}
And to the WIDGET:
<div class="menukadn">
Facebook
<br/>
Instagram
</div>
When I try to add positioning like this,
.menukadn {
line-height: 1;
position: fixed;
}
or alternativly to the widget DIV#HTML1 to itself:
#HTML1 {
position: fixed;
}
it works perfectly at Mozilla Firefox but in Chrome my widget #HTML1 is located approximatly 800px right from where it should be (column-left-outer), just next to inner bodys left border. Any ideas that could there be some other code causing contradiction?
Try this:
For #HTML1 remove margin-left: -672px; and add left:0px
For .menukadn add margin-left: 250px