Does anyone know how to recreate this link effect that is done in jQuery in pure CSS3?
The effect can be seen at: http://www.yuhong-ng.com/
Same html :
<a href="#" id="liveshows" style="margin-top: -40px;">
<span class="top">Live Shows</span>
<span class="bottom">Live Shows</span>
</a>
Same base CSS :
#navigation li a {
height:80px;
font-size: 18px;
font-family: 'PT Sans Narrow';
font-weight: bold;
}
#navigation li,#navigation li a {
float: left;
}
#navigation li a span {
display:block;
height:32px;
padding:8px 20px 0 20px;
cursor:pointer;
}
An some new CSS3 stuff :
#navigation li a {
-webkit-transition: margin-top 500ms linear;
-moz-transition: margin-top 500ms linear;
transition: margin-top 500ms linear;
}
#navigation li a:hover {
margin-top: -40px;
}
So, what happens here ?
On hover, your JavaScript animates the margin property to -40px. Simple stuff.
So, in CSS, you need a transition property and, on :hover, change the margin. Same stuff.
A better version would use 3dtransforms, because it avoids repainting. It depends really if this effect is alone on your page (then transition on margin is fine) or if the website is "effect rich" (then repaints are to be tracked and eliminated.)
#navigation li a {
-webkit-transition: -webkit-transform 500ms linear;
-moz-transition: -moz-transform 500ms linear;
transition: -ms-transform 500ms linear;
transition: transform 500ms linear;
}
#navigation li a:hover {
-webkit-transform: translate3d(0,-40px,0px);
-moz-transform: translate3d(0,-40px,0px);
-ms-transform: translate3d(0,-40px,0px);
transform: translate3d(0,-40px,0px);
}
More about repaints (must see video) : http://www.youtube.com/watch?v=x0VR3lUOpdc
Related
Please view this code jsfiddle:
http://jsfiddle.net/rflfn/6wCp6/
<div id="menu">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: arial;
font-size: 16px;
}
a{
color: #000000;
}
a:hover{
color: #860000;
}
#menu{
margin: 15px auto;
padding: 20px;
width: 300px;
background: #DDDDDD;
border-radius: 5px;
box-shadow: 0 0 5px #000000;
}
#menu ul{
list-style: none;
}
#menu li:before{
margin-right: 10px;
content: url("http://st.deviantart.net/emoticons/s/smile.gif");
transition: all 0.5s ease 0s;
/* transition: content 0.5s ease 0s; */
}
#menu li:hover:before{
content: url("http://st.deviantart.net/emoticons/r/razz.gif");
}
I have one image on tag 'li' and other image on 'li:hover', is possible make transition with fade only using css?
You can do this by using both pseudo elements :before/after and using the CSS3 transition to animate the opacity of both on hover. This will create a fade transition between both images.
DEMO
CSS :
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: arial;
font-size: 16px;
}
a{
color: #000000;
}
a:hover{
color: #860000;
}
#menu{
margin: 15px auto;
padding: 20px;
width: 300px;
background: #DDDDDD;
border-radius: 5px;
box-shadow: 0 0 5px #000000;
}
#menu ul{
list-style: none;
}
#menu ul li{
position:relative;
}
#menu li:before{
margin-right: 10px;
content: url("http://st.deviantart.net/emoticons/s/smile.gif");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
#menu li:after{
content: url("http://st.deviantart.net/emoticons/r/razz.gif");
position:absolute;
left:0;
opacity:0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
#menu li:hover:after{
opacity:1;
}
#menu li:hover:before{
opacity:0;
}
EDIT :
Even better, you can position both images one on top of the other and with z-index and css transition animate the opacity of ony one image :
DEMO
Your case in particular
Not sure why're you trying to put images in content,
you could simply add that image as a background-image to the :before,
set it size & display: inline-block; and you would just animate the background-image like so: http://jsfiddle.net/7f695m1q/ , since background-image transition is supported :)
TL;DR: Can content CSS property be animated? No.
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
OUTDATED w3.org official document: https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css
This may however change in future because this list is missing in current official sources:
missing in working draft https://www.w3.org/TR/css-transitions-1/
missing in editor's draft https://drafts.csswg.org/css-transitions/
So in theory there is a possibility this list will be updated and changes made in future browser versions, but currently it doesn't work.
Is content affected by other animations? Yes.
Content not being animatable in itself doesn't mean it's not affected by other animations like opacity, visibility etc. It can be leveraged in at least 2 simple ways:
a) answer by #web-tiki provides a smooth&always visible fade effect, however, you have to sacrifce both :after and :before to it
b) if fadeOut => fadeIn is an option for you you can levarage CSS animations & #keyframes
#keyframes changeContent {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
content: "See? I've changed seemlessly!";
}
}
div:before{
content: "HOVER OVER ME!";
background: green;
transition: all 1s linear;
animation-direction: reverse;
}
div:hover:before{
animation-fill-mode: forwards;
animation: changeContent 3s linear forwards;
background: orange;
}
<div />
Important here is to put the "forward" - it's an animation fill mode that basically says "stop the animation at it's end", otherwise it'd jump back.
There is also one drawback - it's not easily animatable on hover-out - if I find some reasonable way I will edit this answer or please comment if you know.
I think #web-tiki 's answer suits your needs and it's simpler. But just to show another possible solution:
You can separate the icons in two elements, each with its own content. Then, apply the transition on the li:hover event, setting the element's opacity inverted. Like this example:
FIDDLE: http://jsfiddle.net/2J7b9/1/
<ul>
<li>
<div class="img1"></div>
<div class="img2"></div>
test
</li>
</ul>
CSS:
li {
position: relative;
padding-left: 30px;
}
li .img1, li .img2 {
position: absolute;
top: 0;
left: 0;
}
li .img1 {
opacity: 1;
transition: all .25s ease-in-out;
}
li .img2 {
opacity: 0;
transition: all .25s ease-in-out;
}
li .img1:before {
content: url("http://st.deviantart.net/emoticons/s/smile.gif");;
}
li .img2:before {
content: url("http://st.deviantart.net/emoticons/r/razz.gif");
}
li:hover .img1 {
opacity: 0;
}
li:hover .img2 {
opacity: 1;
}
I'm working my websites navigation and wanted to style the first letter of my slide nav bar.
It works fine in Chrome and Safari, but I have run into two errors in IE and Firefox.
In Firefox, the first-letter styling does not work, however this problem is not that critical, as the nav still functions.
The main question I have is for IE. In Explorer, the navigation functions smoothly when there is no CSS for first-letter styling. However, as soon as I add in this code, the navigation no longer works.
If anyone has any tips, I would greatly appreciate the feedback.
(please open in chrome or safari first to see how it is suppose to look/function)
click here to view code
HTML:
<div id="slide"> +PROJECTS
<li>community</li>
<li>high rise</li>
<li><a href="#" >mid rise</a></li>
<li>low rise</li>
<li>commercial</li>
<li>institutional</li>
<div id="slide2"> +COMPANY
<li>company</li>
<li>awards</li>
<li>people</li>
<li>contact</li></div>
CSS
#slide {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px;}
#slide:hover {
color:#000; }
#slide li {
display: inline;
padding-left: 10px;
font-size:12px; }
#slide2 {
height: 15px;
width: 90px;
transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
overflow: hidden;
float:right;
color:#808285;
font-size:14px; }
#slide2:hover {
color:#000; }
#slide2 li {
display: inline;
padding-left: 10px;
font-size:12px; }
#slide:first-letter {
color:#000; }
#slide:hover:first-letter {
color:#f00; }
#slide2:first-letter {
color:#000; }
#slide2:hover:first-letter {
color:#f00; }
JQUERY
document.getElementById('slide').addEventListener('click', function () {
(this.style.width == '90px' || this.style.width == '') ? this.style.width = '563px' : this.style.width = '90px'; }, false);
document.getElementById('slide2').addEventListener('click', function () {
(this.style.width == '90px' || this.style.width == '') ? this.style.width = '291px' : this.style.width = '90px'; }, false);
While I generally don't subscribe to the 2-column colon methodology, I'm reading this in MSDN's docs: Beginning with Internet Explorer 9, the ::first-letter pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::first-letter pseudo-element. For more information, see the Pseudo-elements section of the W3C's CSS3 Selectors specification.
Well, this is my first topic here, so here it is!
I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.
The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0px in the .featured-banner a class and the bottom:0px in the .featured-banner a:hover.
Does anyone have a solution for it? I appreciate you guys for helping me out!
Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P
Here is the HTML i'm using:
<div class="featured-banner">
<a href="#">
<div class="caption">
<p>Mega Oferta • Cancún • Carnaval 2014</p>
</div>
<img src="http://www.advtour.com.br/sample-cancun.jpg" />
<div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>
And here is the CSS:
.featured-banner {
width:930px;
height:350px;
background:#000;
font-family:sans-serif;
font-size:23px;
margin:14px 0px;
overflow:hidden;
position:relative;
}
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
bottom:0;
}
.caption {
width:100%;
height:350px;
color:#FFF;
text-transform:uppercase;
position:absolute;
top:0px;
z-index:98;
}
.caption p {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
text-align:justify;
text-transform:uppercase;
background:rgba(0,0,0, .4);
padding:11px 14px;
position:absolute;
bottom:0px;
z-index:98;
}
.under-caption {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
}
Here is a demo
If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.
Here is the css I changed:
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
top: -55px;
}
Finally, a fiddle: Demo
You can only transition the same attribute. Top and bottom aren't the same.
I worked out a fiddle, which shows how it could work.
.under-caption {
position: absolute;
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
bottom: -3em;
-webkit-transition:bottom 1s ease;
-moz-transition:bottom 1s ease;
-ms-transition:bottom 1s ease;
-o-transition:bottom 1s ease;
transition:bottom 1s ease;
}
.featured-banner:hover .under-caption{
bottom: 1em;
}
http://jsfiddle.net/u3E5P/1/
I have a simple language select page with pure CSS animated transitions. I've made a jsFiddle here.
How it's supposed to behave is as follows:
User mouses over one of two (or more) language selectors.
That language selector transitions upward and comes to full opacity. The relevant language text (e.g., English, Español) appears as well.
The user either clicks on the link or mouses out, in which case the transition reverses.
In Chrome, it behaves as expected.
In Firefox, when I mouse over one image, both move up.
In Opera, it behaves mostly as expected, but the text jumps back down after moving up.
I'm trying to understand why this would happen in these browsers, and how I can fix it, if possible.
In the case that jsFiddle is down, the relevant code is:
HTML
<div id="container"><div id="cell">
<div class="langcell"><a href="en/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
</div>
<div class="langcell"><a href="es/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Español</p></a>
</div>
</div></div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: table;
}
#cell {
display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
display: inline-block;
margin: auto 1em;
}
a {
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
color: black;
text-decoration: none;
}
a:hover {
top: -16pt;
}
a p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover p {
opacity: 1;
}
a img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover img {
opacity: 1;
}
I got weird problems on firefox(v12) as well, where it was moving both elements up on hover. Later versions (19v), it seemed resolved.
I think there was something going on with your selectors and how mozilla interprets things versus webkit. See if this jsfiddle works for you.
All I really did was change a lot of the selectors of a to .langcell and it seem to work. I had to re-adjust a bit of css to achieve the same style, like the nested .langcell a selector. I have a suspicion that it may be due to a being inline by default while p is block and img is inline-block.
I won't lie and say I understand fully why that was happening to begin with, but just in general, giving styles to classes over elements is not just a preference, it is more efficient at render time as well.
CSS Selector Performance
Code:
.langcell {
display: inline-block;
margin: auto 1em;
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
}
.langcell a {
color: black;
text-decoration: none;
}
.langcell:hover {
top: -16pt;
}
.langcell p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.langcell:hover p {
opacity: 1;
}
.langcell img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
langcell:hover img {
opacity: 1;
}
CSS3 is pretty new. And many of the features are still not compatible in many browsers. Compatibility Chart
So it is kind of off-putting if your clients have a bit older browsers (even if they have a year old version), in which case CSS3 transition wont work.
Your safest bet to make the transition is to do it using javascript or some javascript library such as jQuery
I have this page here (work in progress) http://kimwilddesigns.com/index_new.htm
In this section, I want to be able to hover on the li, have the background image fade out and the h2 to fade in. Is this possible with transitions? I might not be setting it up correctly but I wanted to see if this kind of effect is even possible.
<div id="categories-wrapper">
<ul>
<li class="fine-art"><img src="pics/hp_icon_fine-art.jpg" alt="fine art" width="290" height="240" border="0">
<h2>fine art work</h2>
</li>
<li class="gd">graphic design work</li>
<li class="students">my students' work</li>
</ul>
</div>
Yes, this works nicely with CSS transitions, something like that:
#categories-wrapper li a {
position:relative;
display: block
}
#categories-wrapper li h2 {
position: absolute;
left: 20px;
top: 20px;
opacity: 0;
}
#categories-wrapper li h2,
#categories-wrapper li img {
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
#categories-wrapper li:hover h2 {
opacity: 1
}
#categories-wrapper li:hover img {
opacity: 0
}
See the Fiddle for this, slightly changed your markup by putting the h2 inside of the a tag.