I was wondering about why my code doesn't transition in and also out and I could not find answers.
I am sure there is some mistake comparing to other codes witch working effect but it's difficult to find for me. It's my first post tho so sorry for "stupid question"
h1 {
font-size: 40px;
text-align: center;
color: crimson;
margin: 0 10% 20px 10%;
padding-bottom: 15px;
border-bottom: 2px solid crimson;
}
h1:hover {
font-size: 45px;
transition: 0.3s;
}
<h1>Simple Text</h1>
I think you are trying to achieve something like this.
which is to apply that transition initially on h1 and not only in :hover.
h1 {
font-size: 40px;
text-align: center;
color: crimson;
margin: 0 10% 20px 10%;
padding-bottom: 15px;
border-bottom: 2px solid crimson;
transition: 0.3s;
}
h1:hover {
font-size: 45px;
}
<h1>Simple Text</h1>
It's all correct but you only need to put the transition in the h1 and not in the h1:hover.
So of you change it to this, it should work:
h1 {font-size: 40px;text-align: center;color: crimson;margin:0 10% 20px 10%;padding-bottom: 15px;border-bottom: 2px solid crimson; transition: 0.3s;}
h1:hover {font-size: 45px;}
Related
This question already exists:
How to change one element style when another is hovered [closed]
Closed 8 months ago.
Sorry for making things unclear last time, it really was code dump because I didn't know how to explain what was happening. Good news, I fixed it now. However now I a problem with CSS. I am trying to change background colour of a table row () when hovered over a button (my code doesn't work). The css is provided below. The problem is at the buttom of the CSS (the two hover styles): Please tell me what I am doing wrong, I searched for answers for so long however I have not come up with a proper solution.
body{
margin: 0px;
font-family: Helvetica;
}
header{
background-color: #e7e7e7;
height: 100px;
padding-top: 25px;
text-align: center;
font-size: 50px;
}
table{
background-color: white;
border-collapse: collapse;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
#myTable{
margin-top: 50px;
}
th,td{
padding: 20px;
text-align: center;
border:1px solid black;
width: 200px;
height: auto;
}
.nthChild{
background-color: #e7e7e7;
}
#nlRow th{
border-top: 0px;
}
input{
font-size: 20px;
width: 100%;
padding: 5px 0px;
border-radius: 4px;
}
#numeracyCredits, #literacyCredits{
width: 30%;
}
.button{
font-size: 20px;
padding: 5px 20px;
width: 15%;
border-radius: 4px;
background-color: white;
color: black;
border: 2px solid black;
transition-duration: 0.3s;
}
.button:hover{
background-color: #c4c2c2;
transition-duration: 0.3s;
}
.button:hover + .nthChild{
background-color: white;
}
the .nthChild of what? you should put the parent or whatever from that .nthChild. Or else if you give it a class or an id use that in stead of .nthChild then it should work.
I am trying to make a button like this:
.
A single button that is "divided" into two parts - a number, and a title.
Both parts have different background colors, font colors, and the text is centered in the corresponding background. When hovered, it increases in size.
That picture is the real result of the code below. However, there are a few problems I cannot seem to solve.
1) I would like to have it work like a single element, but so far, I was only able to achieve this by creating two different divs, for each section of the button. Is there a more elegant way to achieve the same result?
2) When I scale down the browser window, I get something like this:
.
I don't want it to get split like that. Also, I cannot seem to keep it centered in the page. If you notice, it is a bit to the right side...
How can I solve those problems?
Here's the code:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
float: left;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}
#btn42 {
width: 50%;
margin: auto;
}
#btn42:hover {
transform: scale(1.05);
}
#btnNumber {
text-align: center;
width: 40px;
background: #e2e1e1;
color: #696969;
}
#btnTitle {
width: 300px;
text-align: center;
background: white;
color: #085388;
}
<div id="btn42">
<div class="btn" id="btnNumber">42</div>
<div class="btn" id="btnTitle">Some Random Title</div>
</div>
Use one element and rely on pseudo element for the number:
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
.btn:hover {
transform: scale(1.05) translateX(20px);
}
.btn {
width: 300px;
margin: auto;
transform:translateX(20px); /*fix centring due to pseudo element*/
text-align: center;
background: white;
color: #085388;
height: 40px;
line-height: 40px;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
position:relative;
}
.btn::before {
content: attr(data-nb);
position:absolute;
top:0;
right:100%;
width: 40px;
background: #e2e1e1;
color: #696969;
box-shadow:
3px 0 #fff, /*fix shadow overlap*/
3px 3px rgba(0, 0, 0, 0.3);
}
<div class="btn" data-nb="42">Some Random Title</div>
I think using a <button>-tag with two <span>-tags inside would be more appropriate. To avoid the button wrapping to a new line use white-space: nowrap;. To center it on your page simply use text-align, like in my example, or one of the many other methods. Depends on the context of the parent element. If it is centered horizontally and vertically on the page I would rather use flexbox.
body {
background-color: #0091c0;
font-family: Arial, Helvetica, sans-serif;
}
main {
text-align: center;
}
.btn {
border: none;
background: #fff;
line-height: 24px;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 20px;
cursor: pointer;
box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
transition: transform 200ms ease-in-out;
}
.btn span {
background: #fff;
display: inline-block;
margin: 0;
padding: 0.2em 0.5em 0.2em;
}
.btn span:first-of-type {
background-color: #ccc;
color: #696969;
}
.btn:hover {
transform: scale(1.03);
}
<main>
<button class="btn"><span>42</span> <span>Some Random Title</span></button>
</main>
I have created a series of image links for gallery categories. Each "button" has an image in the background and the gallery title overlaying this. I've set it to change out the background and the the title also changes to the gallery on hover using css, but the issue I'm running into is with the heights. The divs are loading to fit the titles, but then jump larger on mouseover to accommodate the description text. I need it to load large enough for the description text to fit nicely inside.
I want this to be responsive, so the text needs to be able to wrap, and the divs need to expand accordingly (and not jump heights on mouseover ever). So the height cannot be fixed heights or these will be way too tall when the divs are full width. I've got a single test one set up here
body{
font-family: Arial, Helvetica, sans-serif;
}
.item1{
width: auto;
display: table-cell;
}
a{
text-decoration:none;
}
.label1 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: 100% auto;
transition: background 0.5s ease;
}
.label1.success {
background-color: #FFFFFF;
}
.label1:hover {
width: auto;
height: auto;
padding-left: 20px;
padding-right: 20px;
background: #FFFFFF ;
background-position: center top;
background-size: 100% auto;
-webkit-box-shadow:inset 0px 0px 0px 4px #000000;
-moz-box-shadow:inset 0px 0px 0px 4px #000000;
box-shadow:inset 0px 0px 0px 4px #000000;
}
.item1 a p.new-label1 span{
position: relative;
content: 'NEW'
}
.item1:hover a p.new-label1 span{
display: none;
}
.item1:hover a p.new-label1:after{
content:attr(data-title);
white-space: normal !important;
overflow-wrap: normal;
font-size: 14px;
color: #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix">
</div>
I'm also having an issue with transition effects between, but this issue is far more pressing. That said, if anyone wants to throw me a solution to that, I wouldn't mind at all ;)
I don't know this is exactly you want , but i made demo with my understanding .It might might help
body {
font-family: Arial, Helvetica, sans-serif;
}
.item1 {
width: auto;
display: table-cell;
}
a {
text-decoration: none;
}
.label1 {
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: cover;
transition: all .4s;
margin: 0;
}
.label1.success {
background-color: #fff;
}
.item1:hover .label1 {
}
.item1 a p.new-label1 span {
content: 'NEW';
position: absolute;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 1;
visibility: visible;
transition: all .4s;
}
.item1:hover a p.new-label1 span {
opacity: 0;
visibility: hidden;
}
.item1 a p.new-label1:after {
content: attr(data-title);
background-color: transparent;
white-space: normal;
overflow-wrap: normal;
font-size: 14px;
color: #000;
padding: 20px 10px;
opacity: 0;
visibility: hidden;
display: block;
transition: all .4s;
}
.item1:hover a p.new-label1:after {
content: attr(data-title);
background-color: #fff;
opacity: 1;
visibility: visible;
-webkit-box-shadow: inset 0px 0px 0px 4px #000000;
-moz-box-shadow: inset 0px 0px 0px 4px #000000;
box-shadow: inset 0px 0px 0px 4px #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix"></div>
#learn-more-button {
position: relative;
top: 69%;
margin: 0 auto;
padding-top: 18px;
width: 185px;
height: 38px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
transition: 0.85s;
}
#learn-more-button:hover {
/*box-sizing: border-box;
border-bottom: 5px solid #c42c50;*/
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
cursor: pointer;
border-bottom: 5px solid #0091c8;
}
<div id="learn-more-button">Button</div>
I have created a button that is just a blue, flat rectangle with "learn more" text. When hovered, I want it to slightly rotate on the X axis and have a slightly darker bottom border to create the illusion of a thin box style button rotating slightly. My method does work, however it seems quite "glitchy" (for lack of a better word). To try and explain, a tiny white line appears on the border for a split second and the rotation isn't smooth. The website isn't live yet so I'm not sure how I could show this if required.
Using a solid box-shadow will transition a bit more gracefully than border.
Either way, part of the glitchy feel was that you were transitioning from no border property to a 5px border (instead of a 0px border to 5px border), so the border popped away instead of animating on mouseout. In this case, I added a 0px box-shadow to the button before it animates, so the transition is smoother.
#learn-more-button {
position: relative;
top: 69%;
margin: 0 auto;
padding-top: 18px;
width: 185px;
height: 38px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
transition: 0.85s;
box-shadow: #0091c8 0 0 0;
}
#learn-more-button:hover {
/*box-sizing: border-box;
border-bottom: 5px solid #c42c50;*/
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
cursor: pointer;
box-shadow: #0091c8 0 5px 0;
}
<div id="learn-more-button">Button</div>
I just started learning html and css about 6 days ago. I do it for a hour a day and I'm having a lot of fun with it. I try to figure most of the issue I have on my own, but I've been having troubles finding resources to fix this problem.
#import url(http://fonts.googleapis.com/css?family=Merriweather);
*
{
text-decoration: none;
box-sizing: border-box;
}
body
{
background-color: #ff9900;
font-family: 'Merriweather', serif;
}
#page
{
margin: -8px;
}
#wrapper
{
/*margin: 1px;*/
}
h2>a
{
margin: -25px;
float: left;
background-color: #ffde00;
color: #097054;
padding: 20px;
}
h2>a:hover
{
color: #ffde00;
transition: .5s ease;
background-color: #6599ff;
}
.container
{
padding: 6px;
padding-right: 50px;
padding-left: 20px;
text-align: center;
background-color: #097054;
}
ul li
{
background-color: #ffde00;
display: inline;
margin: 0 auto;
padding: 10px;
color: #097054;
font-weight: 900;
font-size: 14pt;
}
ul li:hover
{
transition: .5s ease;
background-color: #097054;
border-color: #25C1BC;
color: #ffde00;
}
#p1
{
color: #097054;
height: 25em;
width: 25em;
background-color: #097054;
margin-left: 8px;
margin-top: 20px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
p
{
background-color: #ffde00;
padding: 20px;
margin-top: 8px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#p1:hover;
{
/*background-color: #000000;*/
}
p:hover
{
height: -75%;
width: -75%;
padding-bottom: 3.8em;
box-shadow: -5px -5px 0px 0px #097054;
margin-top: 3em;
color: #ffde00;
background-color: #6599ff;
font-weight: 600;
}
Essentially what happens is that my navbar will become extremely disorganized after resizing. This causes links to overlap and look really awful.
Thank you for your time and consideration.
http://jsfiddle.net/JZ9LZ/
Add this .container{white-space: nowrap;}
This question has been asked before Disable line breaks using CSS
There's no way to solve your problem with only html/css as your li elements's width is minimum.
You should decrease the text font-size calculating it on the windows width, but this can be made only with javascript
My advice is to leave this page as before (as I imagine that is only for fun) and when you have good html/css skills you can start studying jQuery <- Very important for the UI