have four items that just show a bg image until you hove and then it displays text, bg image is then set to none.
The first element is expanding beyond the height of the other three. I really just wanted them all to stay at 200x200px. All the images used for backgrounds are 200x200px.
Should the .p1top be positioned differently such as absolute?
.p1top {
height:200px;
margin-left:45px;
background-repeat: no-repeat;
background-image: url(protect.png);
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p1top :hover {
height:200px !important;
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top :hover {
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top {
background-repeat: no-repeat;
background-image: url(build.png);
float:left;
margin-left:-15px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
.p3top {
background-repeat: no-repeat;
background-image: url(savebg.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p3top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p4top {
background-repeat: no-repeat;
background-image: url(help.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p4top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
You have defined the height only in .p1top but not in other divs, so you need to set that's div height also. Then you could define position such as absolute but for this you should wrap all of these div with a div positioned relatively. If you post a jsfiddle that would be very much sensible.
Related
I have a transition on my anchors and every time I refresh the page, it just resets to default state of the anchor, and then it goes to the state I pre-defined with CSS.
When I put the transition into :hover it doesn't do this, but then I won't get a transition when I stop hovering over it.
.button1 {
display: inline-block;
padding: 0.5em 3em;
border: 0.16em solid #DDDDDD;
border-radius: 50px;
margin: 0 0.3em;
box-sizing: border-box;
text-transform: uppercase;
font-weight: 400;
color: #DDDDDD;
text-align: center;
font-size: 40px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button1:hover {
color: #FFB5B5;
border-color: #FFB5B5;
border-radius: 20px;
}
.buttons {
text-align: center;
}
<div class="buttons">
div
flex-box
</div>
I am new to CSS. I have the following style for a tag button. How to reduce the height of the button? I tried changing it but it didn't help.
My code:
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 13px;
margin: 0;
height: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
Could anyone help me on this? Thanks.
Remove height completely and try adjusting line-height
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
margin: 0;
line-height: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
Reduce your height as well as padding and remove the line height.
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding:3px;
margin: 0;
height: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
You can adjust the line-height and height
CSS
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 0px;
margin: 0;
height: 22px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO HERE
Reduce the padding and line-height to decrease the height
Also read about the box model in css to understand more
https://css-tricks.com/the-css-box-model/
your .tag-btn is an inline-element,your can change the padding or line-height to change the height of btn,if your want to change the height directly, you can change the element to inline-block
.tag-btn {
padding: 5px 10px; //your code is 10px
}
Decrease "padding" css property. Make it one pixel and try.
padding: 1px;
your .tag-btn is an inline-element
your can change the padding
your can change the line-height
you can change the element to inline-block, if your want to change the height directly
every way will work for you
You need to remove line-height and padding from your CSS. Thereafter, you can manipulate the height.
I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:
<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>
And here's the CSS:
.Enlarge {
position:relative;
}
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}
div.Enlarge:hover span{
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}
However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.
Here's the example: Example
Thanks in advance for your input!
Using visibility and opacity you can achieve a fade effect.
JSFiddle Demo
Add these styles:
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
/* rest of your styles below */
I can never get my CSS transitions to work on mouse out/off hover. It works fine on hover but not the other way around.
.btn {
border: 1px solid #5a5350;
background: #FFF;
color: inherit !important;
padding: 3px 10px;
display: inline-block;
font-weight: bold;
text-transform: uppercase;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.btn:hover {
color: #FFF !important;
background: #f79e43;
border: 1px solid #f79e43;
}
What's the problem with my code?
Thanks
This is doing my head in, please can someone help? I have made a site, works in Ie9 + 10 and all other browsers, but the animated menu doesnt work in IE8 and there are people using that to view the site..
here is the css:
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: 800px;
background: #f7d000;
background: -webkit-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: -moz-linear-gradient(top, #f7d000 0%,#f7d000100%);
background: -o-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: -ms-linear-gradient(top, #f7d000 0%,#f7d000 100%);
background: linear-gradient(top, #f7d000 0%,#f7d000 100%);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 50px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 5px 0;
line-height: 28px;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-weight: bold;
font-size: 15px;
color: #000000;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #ffffff;
}
.menu ul {
position: absolute;
top: 40px;
left: 0;
z-index: 999;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: #f7d000;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.menu ul li {
height: 0;
overflow: visible;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 180px;
padding: 8px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #f7d000;
}
.menu ul li:last-child a {
border: none;
}
The site is: www.softwaretestingawards.com any help would be appreciated!
IE8 does not support CSS3 animations.
See this reference:
http://caniuse.com/#search=css%20tran
You many want to consider using javascript animations, like jQuery.animate
http://api.jquery.com/animate/
The reason it won't work in Internet Explorer 8 is because it does not support CSS3 animations. I recommend you make a script to detect if Internet Explorer 8 is being used and, if it is, dynamically change the website so it doesn't have the fancy CSS3 animations.
to make work the css in IE8 you can try using PIE.htc, refere this site for solution and demos if you want http://css3pie.com/demos/, actually it worked for me :)