I'm kind of new at haml/css and i wanted to know if it was possible to do the following:
having an image with a font awesome icon over it. Then, on the hover effect, change the image and show, instead of the icon, some text.
The image could be consider as a background image, but i couldn't figure out the rest.
haml:
.feature
#dot
%i.fa.fa-list-ul
css:
#dot{
display: inline-block;
background-image: url(../assets/blue.png);
width: 29%;
height: 102px;
}
#dot:hover{
background: url(../assets/hover.png);
}
this just resolves the part of hover effect, but it's not showing my icon. I didn't even start with the text on the hover
Well.. i fixed it doing the following (in case somebody else is interested)
this is my haml:
.dot
%i.fa.fa-list-ul
.read_more Text on hover
this is my css:
.dot{
display: inline-block;
background-image: url(../assets/blue.png);
width: 29%;
height: 102px;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot i{
opacity: 1;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot .read_more{
opacity: 0;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot:hover{
background: url(../assets/hover.png);
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
-moz-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.dot:hover i{
opacity: 0;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot:hover .read_more{
opacity: 1;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
the -moz and -webkit is used in order to be supported on all browsers.
the transition: all 1s, says the transition's effect should apply to all the elements and the time set it how long it will take to make the transition.
The opacity is just used as the visibility: hidden/visible, but in order to work with the transition attribute, one must change it to opacity.
Related
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
I have the following code in css:
.item {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
}
.item.seen {
opacity: 1;
}
when I add the class seen to an .item, the opacity of the item turn from 0 to 1 with transition.
but when I remove the class seen from an .item the opacity transition (from 1 to 0) also runs.
is there any way to make the transition run when .seen is added but not when it is removed?
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
fiddle: http://jsfiddle.net/qcxt3evn/ (with opacity set to 0.2 just for the purpose of seeing the clickable element)
Also, don't forget to place the standard property after the vendor-prefixed (the latter might be non-compliant to the specification)
In this case, the class which contains the transition never change.
If you setup your transition in the class which toggle, the transition won't be effective on the remove.
.item {
opacity: 0;
}
.item.seen {
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
DEMO
To go beyond, as also well explained in the article Ordering CSS3 Properties from Chris Coyier, you should be careful about the order of you prefixes, with the very good example attached to the article:
http://codepen.io/css-tricks/pen/pqgKH
#wrongway { background: #ccc; padding: 30px;
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
#rightway { background: #ccc; padding: 30px;
-webkit-border-radius: 30px 10px;
border-radius: 30px 10px;
}
I have an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.
Instead of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?
This is my current code.
.element {
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.element:hover {
background-color: green;
}
You can use the CSS #keyframes animation syntax.
#keyframes animate-color {
0% { color: red; }
50% { color: yellow; }
100% { color: green; }
}
element:hover {
animation: animate-color 0.4s forwards;
}
Change the 0.4s value to control how fast the animation runs.
Here's an example for Chrome using -webkit-animation and #-webkit-keyframes:
https://jsfiddle.net/ahm2u8z2/1/
Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Alteratively, if you're not up to using #keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:
.element {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: relative;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: green;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.element:hover:before {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:hover {
background-color: yellow;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="element"></div>
you could use keyframes for this:
.element {
background-color: red;
height: 300px;
width: 300px;
}
.element:hover {
-webkit-animation: changeColor 0.4s forwards;
animation: changeColor 0.4s forwards;
}
#-webkit-keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
#keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
<div class="element"></div>
This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).
The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.
Please note: Other prefixes will need to be included see here for more info.
How to make jquery mobile collapsible content appear with animation using css transition?
.ui-collapsible {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
Not working.
jQuery Mobile's collapsible elements are shown and hidden by toggling display: none on the div of the collapsible content. As far as I know, all major browsers disable CSS transitions when the display property is changed.
An alternative would be overriding the default CSS of jQuery Mobile to always use display: block for the collapsible content div, and then transition on the height or opacity property (depending on whether or not the content needs to be "removed" from the layout).
I've created this jsFiddle, to demonstrate the transition using the opacity property. It is really just a matter of using the following CSS rules:
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
Transition using the height property is a little trickier as the content div has no set height. This fiddle does the trick (also see CSS below), but it requires setting a height on the content div. You can change the height to auto, but then the slide down effect doesn't look quite right in my opinion. Perhaps someone else knows a better method.
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 2em; /* or auto */
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
I think you have to Creating custom CSS-based transitions:-
Refer This
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>