I am trying to add transition property using css which is not working properly, I am giving my html & css code below :
HTML :
<ul class="job-tile">
<li style="background-color:#000" class="active" id="sw_start">Tile 1</li>
<li style="background-color:#000" class="active" id="sw_start">Tile 1</li>
</ul>
CSS :
.job-tile
{
position:relative;
list-style:none;
text-align:center;
display:block;
float:left;
}
.job-tile li
{
color: #FFFFFF;
display: inline-block;
font-size: 18px;
height: 22px;
margin: 12px;
padding: 50px 0;
position: relative;
width: 200px;
font-weight:normal;
cursor:pointer;
float:left;
opacity:0.6;
filter:alpha(opacity=60);
border-radius: 3px;
transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
}
.job-tile li:hover
{
opacity:1 !important;
filter:alpha(opacity=100) !important;
transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
}
If I put a background color on hover property, it will works fine, but I want to place opacity in on hover.any idea?
I am also giving working js fiddle link :- http://jsfiddle.net/4Qcr3/1/
The transition-property you set is not enough (missing the opacity property), you should use the all keyword instead. Also the transition is not fully implemented by all browsers, you should add vendor prefixes to make it function cross-browser well:
.job-tile li {
...
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.job-tile li:hover {
opacity:1 !important;
filter:alpha(opacity=100) !important;
}
Here is the working fiddle
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.
HTML:
<ul class="nav">
<li>
CONTACT
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
</ul>
CSS:
body{
background: #000;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px;
margin-left: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.nav li:hover{
background:#00bff3;
color:#000000;
}
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.blue:hover{
color:#000000;
}
http://jsfiddle.net/2gbu5yrz/
It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):
http://codepen.io/pageaffairs/pen/PwNeEO
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
display: block;
text-align: center;
padding: 8px;
}
.blue:hover{
color:#000000;
background:#00bff3;
}
Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.
http://jsfiddle.net/p0ahhp5c/
The solution is to make your a use block display style:
.blue{
display: block;
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
Try this
.nav:hover .blue:hover {
/*your code here*/
}
I've been trying to figure out why the hover image is flying from the left to bottom with transition effect even though the hover image is only set to padding-bottom. I just want the hover image to appear at the bottom of the menu when hovered.
http://jsfiddle.net/9buk14b5/1/
<header>
<div class="row">
<div class="large-12 columns">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Get a Quote</li>
<li>FAQ</li>
</ul>
</nav>
</div>
</div>
</header>
#primary_nav ul{
display: inline;
list-style-type: none;
li{
float: left;
padding: 15px 50px 15px 0;
a{
color:#ccc;
&:hover{
color:#fff;
background: url('../images/hover.png') no-repeat;
background-position: center center;
width: 22px;
height: 19px;
padding-bottom: 35px;
-webkit-transition: 0.8s all ease-out;
-o-transition: 0.8s all ease-out;
-moz-transition: 0.8s all ease-out;
transition: 0.8s all ease-out;
}
}
}
}
Use the :after pseudo-element in conjunction with :hover.
li {
position: relative;
float: left;
padding: 15px 50px 15px 0;
a {
padding-bottom: 35px;
&:after {
position: absolute;
content: '';
bottom: -3px;
left: 25%;
display:block;
margin: 0 -11px;
background: url('http://i60.tinypic.com/35a7xvs.png') no-repeat 0;
width: 22px;
height: 19px;
opacity: 0;
transition: opacity 500ms linear;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
}
&:hover {
&:after {
opacity: 1;
}
}
}
}
Add the background-image to the :after pseudo element allows you to set a style to applied when its parent <a> is hovered. In this case, we set the pseudo element toopacity:0; initially and opacity:1;, then we simply set the transition-property to watch opacity.
Fade in/Fade out Examples:
Fiddle using original background image: http://jsfiddle.net/9buk14b5/8/
Fiddle using only css to create triangle: http://jsfiddle.net/9buk14b5/7/
A few things:
The odd animation behavior is fixed by tell the transition which property to animate. In your code it's set to all. Change that to padding. I've also changed the timing function to be ease-in-out.
-webkit-transition: 0.8s padding ease-in-out;
-o-transition: 0.8s padding ease-in-out;
-moz-transition: 0.8s padding ease-in-out;
transition: 0.8s padding ease-in-out;
Second, your padding-bottom amount needs to be the sum of the height of the element it is trying to go to the bottom of, and any padding, border, margin offset it may include. In your case, the magic number was 132px
padding-bottom: 132px;
Here is a working fiddle with these modifications: http://jsfiddle.net/rv9wbn8b/
Edit:
To show the arrow without any effect, simply move the padding outside of the :hover
Updated fiddle: http://jsfiddle.net/9buk14b5/4/
Here's my Fiddle:
#facebookIcon{
vertical-align:middle;
color:white;
font-size:5.5em;
opacity:0.4;
}
#facebookinner:hover #facebookIcon{
opacity:1.0;
}
#facebookinner{
background:#3b5998;
border-radius:100px;
height:100px;
width:100px;
margin:0 auto;
text-align:center;
line-height:100px;
opacity:0.4;
-webkit-transition:
}
#facebookinner:hover{
opacity:1.0;
}
#facebookouter {
background-color:Green;
border:5px solid rgba(0,0,0,0);
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
-webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border- radius 0.2s linear,margin 0.2s linear;
transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
-moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
}
#facebookouter:hover {
height:130px;
width:130px;
border-radius:130px;
border:5px solid #3b5998;
opacity:1.0;
-webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease- out,border-radius 0.2s linear,margin 0.2s linear;
transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
-moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
}
footer {
margin-top:250px;
height:150px;
position: absolute;
right: 0;
bottom: 10;
left: 0;
padding: 5 rem;
background-color: Green;
text-align: center;
padding-top:30px;
padding-left:40px;
}
/*________________Here is the Second Icon________________*/
#twitterIcon{
vertical-align:middle;
color:white;
font-size:3.5em;
-webkit-transition:font-size 0.2s;
-moz-transition:font-size 0.2s;
transition:font-size 0.2s;
}
#twitterinner:hover #twitterIcon{
opacity:1.0;
font-size: 3.5 em
}
#twitterinner {
background:#23dcd5;
border-radius:100px;
height:100px;
width:100px;
margin:0 auto;
text-align:center;
line-height:100px;
-webkit-transition:height 0.2s, width 0.2s, line-height 0.2s;
-moz-transition:height 0.2s, width 0.2s, line-height 0.2s;
transition:height 0.2s, width 0.2s, line-height 0.2s;
}
#twitterinner:hover{
opacity:1.0;
height: 80px;
width:80px;
line-height:80px;
}
#twitterouter{
background-color:Green;
border:5px solid #23dcd5;
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
opacity:0.7;
}
#twitterouter:hover {
opacity:1.0;
}
I`m a beginner in CSS (1 week of learning) and I saw this hover effect (at the bottom of this page for the Social Icons).
So I tried to make the same hover effect with my limited skills. After a long time I made the same effect with two divs and an Icon.
The Problem is now that:
Im not able to set a margin to any of the "Icons", this means i want a gap between the FacebookIcon and the TwitterIcon so they wont interfere like the FacebookIcon is interfering with the Twitter Icon.
How can I hover over the inner div and activating the hover of the outer div (I can not make the inner div the parent of the outer because the outer has to be bigger than the inner).
I want the FacebookIcon Outer to grow from the center and not like its doing now. (Like in the example in the Webpage mentioned above.
I've searched for this solutions long time and found nothing suitable. Probably there is a much easier way of creating this Icons, this would be another solution :)
Thanks for your advice and sorry for my bad English (German here).
Im not able to set a margin to any of the "Icons"
That's because margin property is not applicable to display: table-cell elements.
How can I hover over the inner div and activating the hover of the
outer div
Well, you need to change your strategy. Set all the necessary CSS declarations on the child (<i> tag) and change the styles on parent:hover i selector.
Here we go:
HTML:
<footer>
<a href="#" class="icon-wrapper">
<i class="icon icon-facebook"></i>
</a>
<a href="#" class="icon-wrapper">
<i class="icon icon-twitter"></i>
</a>
</footer>
CSS:
.icon-wrapper {
float: left;
display: block;
margin: 0 1.875rem;
color: white;
font-size: 5.5rem;
}
.icon-wrapper i.icon {
display: block;
width: 8rem;
height: 8rem;
line-height: 8rem;
border-radius: 50%;
opacity: 0.5;
transition: all .2s;
}
.icon-wrapper:hover i.icon {
opacity: 1;
box-shadow: 0 0 0 1.5625rem green, /* <-- = the parent's background-color */
0 0 0 1.875rem #9b59b6;
}
.icon-facebook {
background-color: #3b5998;
}
.icon-twitter {
background-color: #23dcd5;
}
WORKING DEMO.
I tried to make a menu, which has 3 menu items and 1 subitem. If I click on second item, first child item should display. But not normally display it. It should animate it and slide it. I think there is a way with transition but I don't really know CSS3. And I want to have a pure css solution.
Here my HTML code:
<div id="menu">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
I created this fiddle. Now I want to show First child menu item slowly if I click on Second menu item.
The only thing that I did before was checking transition but I just don't get it.
Can someone give me a hint?
Cheers
See your jsfiddle updated http://jsfiddle.net/3kEg4/3/
#menu {
height: auto;
width: auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu ul li a:hover {
background-color: #0C3;
}
#menu ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#menu ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
(inspired from http://jsfiddle.net/ashukasama/2BqGY/)
You can use some CSS3 animations to achieve this effect.
#menu ul li ul{
opacity:0;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
height: 0;
}
#menu ul li:hover ul {
opacity: 1;
height: 100px;
}
JSFIDDLE
radio active states
JSFIDDLE Radio
Stackoverflow Q
jQuery
$('.subMenu').on('click', function() {
$('.subMenu ul').slideToggle(1000);
});
JSFIDDLE jQuery
i think this is better
#menu ul li ul{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: absolute;
}
#menu ul li:hover ul {
visibility: visible;
opacity: 1;
position: relative;
}
Works great as well. Please do add prefixes. Hope this helps someone.
I'm trying to create a horizontal menu that increases in height and displays a vertical list when you hover over it. If there is a way to make a smooth transition when the menu increases in height that would be nice too.
#nav {
width: 100%;
height: 20px;
background-color: #989898;
}
#nav:hover {
height: 80px;
}
#nav li {
display: inline;
padding: 15px;
}
#nav a {
color: black;
text-decoration: none;
}
<div id="nav">
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</div>
Here's a gif demonstration of what I want to do:
I added this code to yours to make it animate:
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
Here is a fiddle:
http://jsfiddle.net/Hive7/7HS8p/
Check out this example: its similar to what u want...
Link
Something like this?
jsFiddle demo here
-webkit-animation: move .5s;
-webkit-animation-fill-mode: forwards;
#-webkit-keyframes "move" {
100% {
height:80px;
}
}