I am a beginner in this and I am working on my new website. But I am stuck at one point where I want the effect that will make my links fade into images. I am having a navigation-bar on top of my page and when I hover over the link, I want the text to fade out at the same time as a small logo is fading in. And when I hover out of the link I want the image to fade out at the same time as the lin is fading back in, you know?
But when I do this, the image just pops up and fades out at the same time as the link is fading out...
#navigation a[name="project"] {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#navigation a[name="project"]:hover {
opacity:0;
background-image:url(bilder/project.png)
}
The image is the background for the element you're fading out, so it will also fade on hover. You'll need to separate the image into a separate element.
Perhaps you could use absolute positioning inside a container to have the text cover up the image, and then when the text is hovered over, it'll fade out, revealing the image underneath.
A working example of this is at http://jsfiddle.net/y9aw7/
HTML:
<div id="container">
Example Text
<img src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
position: relative;
}
a, img {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
a {
z-index: 1;
line-height: 100px;
text-align: center;
background-color: #fff;
-webkit-transition: 0.4s opacity;
-moz-transition: 0.4s opacity;
-o-transition: 0.4s opacity;
-ms-transition: 0.4s opacity;
transition: 0.4s opacity;
}
a:hover {
opacity: 0;
}
Edit: Further jsfiddle, forked from the fiddle provided by the OP, with corrected CSS: http://jsfiddle.net/JmwdC/1
Try this :
Demo
CSS
#gl{
position:absolute;
left:0px;
width:100px;
height:30px;
opacity:0;
transition:all 0.5s;
}
#gl:hover{
opacity:1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<a href='http://www.google.com/'> <img id=gl src='https://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'>
Google</a>
</body>
</html>
You can use any property you want to achieve this, except display which does not work with CSS3 transition.
The most common techniques make use of
opacity (to 0)
height (to 0)
z-index (to negative / lower value than the container)
Sticking to your example, you can do it by using an background-image in <li>, and changing the opacity to the <a>, no changes to your HTML are needed.
Demo: http://jsfiddle.net/D6wuH/2/
Relevant CSS
li {
/* ... other stuff... */
background:none no-repeat scroll center center ;
}
#navigation li, #navigation li > a{
transition: all 1s ease-in-out;
}
#navigation li > a{
background: white;
}
#navigation li:hover {
background:url(http://dareminnesota.com/images/facebook-like-button.png)
no-repeat scroll center center transparent;
}
#navigation li:hover > a {
opacity: 0;
}
Playing with the difference between the initial state and the hover state of a lot of properties (was X, on hover becomes Y; wasn't there, on hover it's there; was there, on hover it's not there anymore) will let you achieve a world of different results, with weird effects like this: http://jsfiddle.net/D6wuH/0/ :)
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
On my website I have a second header that drifts down from the top when the user scrolls down the page. The original header remains absolutely positioned at the top and is scrolled out of sight as the second slides down.
Due to the Google Chrome bounce scroll effect, if the user scrolls up when the browser is already at the top of the page, they're able to see the second header hanging around outside the document. This looks very strange, and it only happens in Chrome.
I've been trying to make the second header invisible when the user scrolls back to the top and it slides back out of view. I have been attempting to do this with an opacity value of 0 set with an ease value. The problem is, I am using transform:translate3d to animate the slide-up / slide-down effect, and I can't get both opacity and transform to work in the same transition rule.
Ideally I'd like the following to work, but it won't for some reason.
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
opacity:0;
transition: translate 0.3s, opacity 0s ease .3s;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity:1;
transition: translate .5s, opacity 0s;
}
Here is a jsFiddle to show you what I mean – https://jsfiddle.net/wbmm0kL7/2/
At the moment I have had to set it to transition: all .3s which means that the opacity fades in and out as well, which I want to avoid.
Here is a picture of my website with the problem on Chrome I am trying to solve. Notice that the second header and the nav menu are visible when scrolling against the edge of the viewport/document.
Here is the rest of my code:
HTML
<header class="header">REGULAR HEADER</header>
<div class="transform-container">
<div class="hidden-header">HIDDEN HEADER (SLIDES DOWN ON SCROLL)</div>
</div>
<div class="content"></div>
</div>
CSS
html,
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.wrapper {
background-color:orange;
min-height:100%;
}
.header {
position:absolute;
width:100%;
height:55px;
background-color:pink;
}
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
opacity:0;
transition: all .3s;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity:1;
transition: all .5s;
}
.content {
height:2000px;
}
jQuery
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('body').addClass('header-dropdown');
} else {
$('body').removeClass('header-dropdown');
}
});
});
As per my comment, you have a typo in your CSS transitions rule. You cannot transition individual transform components. Instead, use transition: transform 0.5s; for example.
To achieve the effect of the hidden header appearing immediately, you set the transition duration of opacity to 0s when .header-dropdown is added. To achieve the effect of the hidden header hiding after the transform is done transitioning, you set the transition delay of opacity to the transition duration used:
.hidden-header {
position:fixed;
transform:translate3d(0,-100%,0);
background-color:red;
width:100%;
height:55px;
/* Delay opacity transition when returning to ground state */
transition: transform 0.5s, opacity 0s 0.5s;
opacity: 0;
}
body.header-dropdown .hidden-header {
transform:translate3d(0,0,0);
opacity: 1;
transition: transform 0.5s 0s, opacity 0s;
}
See your fixed fiddle here: https://jsfiddle.net/teddyrised/wbmm0kL7/3/
Note that the first numeric value of the transition shorthand is always the transition-duration, while the second numeric value is the transition-delay
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
I have managed to get a text showing when having the cursor over an image, but now I want to position it so that it appears on the image, preferrably in the center of it. And I would also like to change the font size of it. As I am new to web development I am not sure how to arrange this.
JSFiddle with necessary info: http://jsfiddle.net/gGvb2/
HTML:
<article class="art-1"> <img src="nutrition.jpg">
<span>Nutrition</span></article>
CSS:
span {
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
}
img {
width: 462px;
}
img:hover ~ span {
opacity: 1;
}
Any help is greatly appreciated!
I'd suggest relatively positioning the parent article element, and then absolutely positioning the span element relative to it. I'm not sure where you want the span to appear, but in this example it has a width of 100% and has text-align:center for horizontal centering.
UPDATED EXAMPLE HERE
span {
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
img:hover ~ span, span:hover {
opacity: 1;
font-size:20px;
font-weight:bold;
}
article {
position:relative;
display:inline-block;
}
article span {
position:absolute;
top:10px; left:0;
width:100%;
text-align:center;
background:white;
}
I have a list with one item on the list transitioning to the northeast when I hover over it. Using margin-top and margin-left property transitions worked but the item being hovered over kept pushing other elements so I added position:relative and tried using top and left transition properties but it didn't seem to be working.
Here is the jsfiddle:
list hover
Add left, top default
link demo
left: 0px
Have you tried setting the parent of your list. I know sometimes relative has issue unless the underlying item is also relative or absolute. Just a thought.
Use position:absolute and it will take it out of the normal document flow. You could also give it z-index:5 to make sure it floats over other elements.
.transition{
transition: all .4s;
-moz-transition: all .4s;
-webkit-transition:all .4s;
-o-transition: all .4s;
margin-top:20px;
border:1px solid gray;
width:80px;
padding:10px;
margin-left:50px;
position:relative;
cursor:pointer;
}
.hover_top{
top:0;
}
.hover_top:hover{
top:-10px;
}
.hover_left{
left:0;
}
.hover_left:hover{
left:-10px;
}
.hover_right{
right:0;
}
.hover_right:hover{
right:-10px;
}
<div class="hover_top transition"> Hover Top </div>
<div class="hover_left transition"> Hover Left </div>
<div class="hover_right transition"> Hover Right </div>
You have to define the property where you want to apply the transition effect. For example:
.box { position: relative; transition: all 0.4s ease;}
.box:hover { top: -1rem;}
that will not work. So you have to define top: 0 by default then top -1rem on hover. like
.box { position: relative; transition: all 0.4s ease; top:0}
.box:hover {top: -1rem}
that will work.