I need to do just a simple transition of background img, but searching for tutorials I found out a way to do it.
But its not working? Don't know why?
#chat
{
background-image:url(chat.png);
width:91px;
height:40px;
float:right;
transition: background-image 1s ease-in-out;
}
#chat:hover
{
background-image:url(hchat.png);
width:91px;
height:40px;
}
Link of code:
http://jsfiddle.net/xscsz5c0/2/
Is there something, I am missing? Coz I am not that good in CSS!
Because background transition doesn't work in Firefox, here's a workaround (which also gets around the problem of the hover image not loading with the page): http://codepen.io/pageaffairs/pen/azHli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#chat
{
background:url(http://i62.tinypic.com/29or6z6.png);
width:91px;
height:40px;
position: relative;
display: inline-block;
}
#chat::after
{
content: "";
display: inline-block;
background: url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
opacity: 0;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
#chat:hover::after
{
opacity: 1;
}
</style>
</head>
<body>
<a id="chat" href="chat.php"></a>
</body>
</html>
My favorite way to deal with this is with a jQuery plugin called anystretch. You will need to download the anystretch js file and add it to your project. You will also need to have jquery.
I love anystretch because it replaces the target div with a specified image but also lets you chose a fadeIn time for it.
I had issues with using the css transition because it's cross-browser functionality was horrible.
sample on codepen http://codepen.io/cwilliams23/pen/iIomJ
$(document).ready(function() {
$("#chat").mouseenter(function() {
$("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});
$("#chat").mouseleave(function() {
$(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
});
});
});
You can play with the fade times to make it fade the way you want. The speed settings are in ms so 5s would be 5000.
Add display:inline-block to your code:
#chat:hover
{
background-image:url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
display:inline-block;
}
Demo
Related
I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...
The CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Take a look: http://jsfiddle.net/AK3La/
You can transition background-image. Use the CSS below on the img element:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.
The solution (that I found by myself) is a ninja trick, I can offer you two ways:
first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:
<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>
with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)
CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)
Basically, you need to hide "normal" state and show their "hover" when you hover it
and that's it, I hope somebody find it useful.
Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.
You may want to do some tricks with background-position.
I've figured out a solution that worked for me...
If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:
<li id="facebook"></li>
Make the "li"s background your button image
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Now all you need is "opacity" under "a:hover" and set this to 1.
#facebook a:hover {
opacity:1;
}
Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
If I explained it correctly that should let you have a fading background image button, hope it helps at least!
You can use pseudo element to get the effect you want like I did in that Fiddle.
CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{
opacity: 1;
}
HTML:
<div class="title">
HYPERLINK
</div>
If you can use jQuery, you can try BgSwitcher plugin to switch the background-image with effects, it's very easy to use.
For example :
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
And add your own effect, see adding an effect types
Try this, will make the background animated worked on web but hybrid mobile app
not working
#-webkit-keyframes breath {
0% { background-size: 110% auto; }
50% { background-size: 140% auto; }
100% { background-size: 110% auto; }
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}
Considering background-images can't be animated,
I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after. They are at different z-index layers. The one that is ahead starts with opacity 0 and becomes visible with hover.
You can use it the same approach for creating animations with linear-gradients too.
scss
#mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
Now you can simply use it with
#include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
You can check it out here:
https://jsfiddle.net/pablosgpacheco/01rmg0qL/
If animating opacity is not an option, you can also animate background-size.
For example, I used this CSS to set a backgound-image with a delay.
.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}
Salam, this answer works only in Chrome, cause IE and FF support color transition.
There is no need to make your HTML elements opacity:0, cause some times they contain text, and no need to double your elements!.
The question with link to an example in jsfiddle needed a small change, that is to put an empty image in .title a like background:url(link to an empty image); same as you put it in .title a:hover but make it empty image, and the code will work.
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{ background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
Check this out https://jsfiddle.net/Tobasi/vv8q9hum/
With Chris's inspiring post here:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
I managed to come up with this:
#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
#include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
#include transition(background-image 0.5s ease-in-out);
}
}
This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer: https://stackoverflow.com/a/19818268/2602816
I was struggling with this for a bit, I first used a stack of images on top of each other and every three seconds, I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack. At the same time I was using animations as shown above. I couldn't get it to work for the life of me.
You can use this library which allows for **dynamically-resized, slideshow-capable background image ** using jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
I am trying to set the transition for the portfolio section of my web, I need the effects on hover for portfolio thumbs and i have the following codes in CSS:
.proimg img {
height: 100%;
max-width: 100%;
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
That's the portfolio page http://goo.gl/Gaja7v
On hover, images didn't look good. Transition works but it messed up the thumbs, doesn't look good. I would like to make the transition to similar as this website http://goo.gl/0hb56Z
Anyone can help?
First of all, you have to resize list images for that!
--
I recommend jQuery, fadeTo function
//you have to include jquery lib
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
//HTML :
<img src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
//Javascript :
<script>
$('img').mouseenter(function() {
$(this).fadeTo('fast', 0.7);
}).mouseleave(function(){
$(this).fadeTo('fast', 1);
});
</script>
you can get more information about fade to function
- http://www.w3schools.com/jquery/eff_fadeto.asp
If you don't want to use fadeTo function.
//CSS
.fadeeffect {
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
}
//Javascript
$(document).ready(function() {
$('img').mouseenter(function() {
$(this).css('opacity', 0.7);
}).mouseleave(function(){
$(this).css('opacity', 1);
});
});
//HTML
<img class="fadeeffect" id="a" src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
It's easy to think of the transition property as an "action": eg, "When this :hover state begins, transition the given properties." But you really need to think of it as a constant state, which means "when the following properties change, for any reason, transition them in this manner."
So you really want the transition property to be on your first CSS rule, so that it always applies. Otherwise, the transition is only when the mouse starts to hover, not when it leaves.
You need to set the transition property to your img as well:
.proimg img {
height: 100%;
max-width: 100%;
transition: all 0.55s ease-in-out; /* this line */
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
http://codepen.io/anon/pen/ZbPKVR
This is explained by Katana314's answer.
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
I seemed to have come across a mini roadblock in my HTML/CSS.
I tried to use this crossfade technique in my index and it worked fine but when I tried to use it in my second layout the image wouldn't appear when I opened it? :(
heres the HTML for layout 2:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" type="text/css">
</head>
<body>
<img class="image5" src="../images/header.png" alt="header">
<a href="../index.html"><div id="cf" >
<img class="bottom2" src="images/logo4.png" alt="logo4"/>
<img class="top2" src="images/logo3.png" alt="logo3"/>
</div>
</body>
</html>
and here is the CSS for it:
.image5 {
position: absolute;
top: 0px;
left: 0px;
width: 1500px;
height: 700px;
}
#cf {
position:relative;
top: 20px;
left:20px;
height:277px;
width:277px;
}
#cf img {
position:absolute;
left:0;
opacity: 1;
-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;
}
#cf img.top2:hover {
opacity:0;
}
I tried putting it through a validator and it showed two errors:
- Error 1:
Line 20, Column 7: End tag for body seen, but there were unclosed elements.
</body>
- Error 2:
Line 15, Column 24: Unclosed element a.
<a href="../index.html"><div id="cf">
I'm not sure what it means by that.
Sorry, I'm still a beginner. ^^;;
Your css is looking for a tag #cf id and then an img within it. Maybe it's improper nesting that's messing it up. For your validation errors, you didn't close youre link tag. <a href ...> needs to be closed with </a>. Try closing it and see if it helps.
Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?
Not sure if you need any code but here's my css for the img tag:
img {
width: 600px;
height: 342px;
border-radius: 1px;
}
You can do it with
HTML
<div id="yourImage" ></div>
CSS
#yourImage {
background-image: url('image1.jpg');
}
#yourImage:hover {
background-image: url('overimage.jpg'), url('image1.jpg');
}
There is a jquery plugin for this.
The first effect is what you're looking for.
You can try this. I think it uses only CSS.
You need to check the CSS position attribute, so you can have both elements on the same place.
And then just chang the opacity of the hover image.
#Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
Try this:
HTML:
<div class="your-img">
<div class="your-hover"></div>
</div>
CSS:
.your-img {
width: 300px; /* your image width and height here */
height: 225px;
background-image: url('../img/image_01.png');
}
.your-hover {
width: 300px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
filter: alpha is for IE, I hope it helps.