I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!
just change the ease to ease-in-out like this
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
demo: http://jsfiddle.net/kYZ9Y/4/
for more Easing Functions go to http://easings.net/
the markup :
<div class="logo"></div>
the style :
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}
Can be done with pseudo elements.
.logo {
background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
width: 300px;
height: 300px;
position: relative;
}
.logo:after {
content: "";
opacity: 0;
display:block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover:after {
opacity: 1;
}
https://jsfiddle.net/84bvybjs/
At least for Firefox, as per the documentation, background-image is not animatable.
Instead, try putting both images one on top of each other and animating the opacity property:
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
position: absolute;
}
.logotop {
float: left;
z-index: 2;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logotop:hover {
opacity: 0;
}
HTML:
<div class="logo"></div><div class="logotop"></div>
Fiddle: http://jsfiddle.net/kYZ9Y/2/
Related
The following CSS works to animate a couple of listed items I have on this page:
https://startup.buscoajack.com/homepage-aurelie/
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
Unfortunately it doesn't appear on Safari :/. Could anybody indicate why this is happening and a possible solution? I'd really appreciate any help or hints!
Thanks,
Jack
I've also updated the CSS to not include "transition: all" as it appears to be an issue for Safari, but it doesn't seem to have fixed the issue:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
Sorry, but don't have safari to check if it's work:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: background-position 0.3s ease-in-out;
-transition: background-position 0.3s ease-in-out;
transition: background-position 0.3s ease-in-out;
-o-transition: background-position 0.3s ease-in-out;
-moz-transition: background-position 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: width 0.3s ease-in-out;
-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
I'm trying to make it zoom in from center rather than from top-left corner.
I've tried transform: scale(2,2), and transform: translateX(-25%) translateY(-25%), as per here, neither seem to do anything at all.
Is there any alternative to scale? It doesn't seem to be working in Chrome.
Maybe it has something to do with the container that it's in? I'm not sure. I tried changing the top and left coordinates to account for the movement of the center when the animation plays, but that also didn't help.
.box2 {
position: relative;
width: 40em;
height: 20em;
}
.box2 > .content {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1.0;
margin: 0;
}
.box2.inactive > .content {
opacity: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: green;
opacity: 1;
}
.circle.circle1 {
top: 4em;
left: 6em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle.circle2 {
top: 10em;
left: 20em;
width: 3em;
height: 3em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html>
<div class="box2">
<div class="circle circle1"></div>
</div>
</html>
Looks like this in Microsoft Edge with scale(2,2) and doesn't animate at all in Chrome:
You can set transform: translate(-50%, -50%); for .circle - it shifts the circle left and up relatively to its starting point and thus the point set in the center of circle.
.circle {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
background: green;
opacity: 1;
}
.circle.circle1 {
top: 8em;
left: 12em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html><div class="circle circle1"></div></html>
So I have a tumblr blog and I'd like to set it up so that all the image posts by default have a colour overlayed over the top (almost transparent) and then when you hover over it, it fades out completely to show the image's original colours.
I've been looking for the right code but can't get anything to work. The below code successfully fades out from grayscale, but I don't want grayscale. I'm looking for something that will let me add a solid colour but transparent, and then fade that out. Any ideas? ;A;
(the img is the property used for tumblr images in this CSS code)
img {
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
<img src="http://i0.kym-cdn.com/photos/images/original/001/285/460/8b6.jpg" width="300px"></img>
Try this: https://jsbin.com/guyudiqafi/edit?html,css,output
HTML:
<div class="image-container">
<img src="https://c.tadst.com/gfx/1200x630/sunrise-sunset-sun-calculator.jpg?1">
</div>
CSS:
.image-container {
width: 300px;
position: relative;
}
.image-container:after {
background: #0043ff;
opacity: 0.3;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: ' ';
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.image-container:hover:after {
opacity: 0;
}
img {
display: block;
width: 100%;
}
You can achieve what you want to using CSS pseudo-element :after.
See docs: https://www.w3schools.com/css/css_pseudo_elements.asp
See working example below:
.img-wrapper {
position:relative;
display: inline-block;
width: 32%;
}
.img-wrapper img{
width: 100%;
}
.img-wrapper:after {
position:absolute;
display: block;
height: 100%;
width: 100%;
content: '';
background-color: #ff0000;
top: 0;
left: 0;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
opacity: 1;
}
.img-wrapper.opacity:after {
opacity: 0.3;
}
.img-wrapper.rgba:after {
background-color: rgba(250,0,0,.3);
}
.img-wrapper:hover:after {
opacity: 0;
}
<div class="img-wrapper">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper opacity">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper rgba">
<img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
I have a button which is animated using :after and :hover:after CSS. Tried numerous ways to get it to work in IE but cannot find a work around. May be because the empty content:"", or the transition, but even without the transition is doesn't work. Any help / explanations is greatly appreciated.
button.bttnStyle1 {
background: none;
border: none;
font-size: 14rem;
text-transform: uppercase;
position: relative;
padding: 0rem;
cursor: pointer;
}
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 3rem;
height: 3rem;
border-radius: 3rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnStyle1:hover {}
button.bttnStyle1:hover:after,
button.bttnStyle1:hover::after {
width: 100%;
height: 2rem;
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 0.2s ease;
}
button.bttnStyle1:focus {
outline: none;
}
button.bttnColorGreen {
color: #69e0b1;
}
button.bttnColorGreen:after{
background-color:#69e0b1;
}
<button type="button" class="bttnStyle1 bttnColorGreen">BUTTON</button>
Codepen
Add overflow: visible; to your button. Found this solution here.
Solition:
CSS border radius need an actual border to be defined. Overflow also needed to be visible and everything works.
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 0rem;
height: 0rem;
line-height:0;
border-radius:1rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnColorGreen:after,
button.bttnColorGreen::after{
border:1rem solid #69e0b1;
background-color:#69e0b1;
}
I created a simple effect that causes an image to change color on hover. Now I want to add transition-timing-function properties so the color transition fades in and out rather than an instant change, but I can't seem to get it to work. Any ideas?
Here's the code:
div {
position: relative;
display: inline-block;
-webkit-transition: all 500ms ease-out 1s;
-moz-transition: all 500ms ease-out 1s;
-o-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
}
img {
width: 100%;
height: 100%;
}
div:hover::after {
position: absolute;
z-index: 1;
background-color: Indigo;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
Thanks!
There are two problems with your code:
The ::after selector works as a separate element, so having the transitions on the div won't work, they need to be applied to the ::after.
The :hover::after selector needs something to transition from.
This should work:
div {
position: relative;
display: inline-block;
}
img {
width: 100%;
height: 100%;
}
div::after {
-ms-transition: all 500ms ease-out 1s;
transition: all 500ms ease-out 1s;
position: absolute;
z-index: 1;
background-color: transparent;
opacity: 0.4;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
}
div:hover::after {
background-color: Indigo;
}
Somebody also shared this code with me, which seems to do the same thing by wrapping the image in a span class:
.imghov {
display: inline-block;
background-color: #fff;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.13ss linear;
transition: all 0.3s linear;
}
.imghov img {
opacity: 1;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.imghov:hover {
background-color: indigo;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
imghov:hover,
.imghov:hover img {
opacity: 0.6;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}