CSS transition out error - html

and sorry for my horrible english.
I have got a problem with CSS and transition.
I need to make a div 100px x 100px, it's just an example of course.
When I put cursor hover it, it should grow and be 500px x 500px.
And here, everything is fine and working.
The thing is, when i remove the cursor, I need that the div return back to 100x100px, but it won't have a transition, it just disappear and return 100x100px.
How can I fix this?
Here is the code i use.
<html>
<head>
<style>
div.resize {
width: 100px;
height: 100px;
background: rgb(80,80,80);
}
div.resize:hover {
width: 500px;
height: 500px;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="resize"></div>
</body>
</html>


Currently you are saying that there can only be an animation while hovering. You want the animation to reverse once you have left the element (you no longer hover), but that is not allowed, as the div without hover has no animation set.
Just put the transition-duration: 1s on the 'div.resize' instead of on the 'div.resize:hover' and it is fixed.


Here you go. Just move the transition to the container rather than the :hover. I included the prefixes for other browsers as well. If you want to see how you can modify the transitions, check out W3 Schools.
div.resize {
width: 100px;
height: 100px;
background: rgb(80, 80, 80);
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
div.resize:hover {
width: 500px;
height: 500px;
}
<body>
<div class="resize">
</div>
</body>

Related

CSS image transition in Mozilla doesn't work [duplicate]

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

CSS - Cursor Transition

Is it possible to animate with a CSS transition the status of the cursor?
I've tried with this code but it is not working.
.test {
cursor: default;
width: 100px;
height: 100px;
background: red;
}
.test:hover {
cursor: pointer;
-moz-transition: cursor 500ms ease-in-out;
-o-transition: cursor 500ms ease-in-out;
-webkit-transition: cursor 500ms ease-in-out;
transition: cursor 500ms ease-in-out;
}
<div class="test"></div>

That is not possible with CSS alone. Transition only works on animatable properties; whereas cursor does not appear. For a full list of animatable props, please check here.
Please notice you may also put .gif for the .cursor element; bare in mind there are certain size restrictions that apply accordingly on different browsers.

Cursor is not an animatable property and it would be kind of weird if it were to be honest. If you want to create an animation I would suggest creating a GIF that would start as default and end as pointer.
Then you can use that GIF as shown:
.test:hover {
cursor: url("your-image.gif"), auto;
}

You can, by specifying a url to it in CSS:
.test{
cursor:default;
width: 100px;
height: 100px;
background: red;
}
.test:hover{
cursor:url(smiley.gif),url(myBall.cur),auto;
}

How to zoom into a specific location of an image using CSS

I am using the following code to zoom into an image:
<style type="text/css">
.thumbnail {
width: 100%;
height: 450px;
overflow:hidden;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(3); /* Safari and Chrome */
-moz-transform:scale(3); /* Firefox */
-ms-transform:scale(3); /* IE 9 */
-o-transform:scale(3); /* Opera */
transform:scale(3);
}
</style>
<div class="thumbnail">
<div class="image">
<img src="example.jpg" alt="Image zoom">
</div>
</div>
Currently this code works except for in will only zoom to the center of the image.
My question is: How can I zoom into a pre-determined location (could be as simple as just left or right as opposed to the center that it currently is.) I would like to achieve the outcome using CSS if possible.

Use the Transform Origin property and you can set the origin point. This will allow you to control where the zoom occurs from/to.
transform-origin: top right; etc.

How to make an image appear over another image when mouse hovers with css3?

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.

Make image link appear on hover without using JavaScript

I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.

All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
​div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).