I'm very new to web dev right now, and I'm currently trying to make an image fade into color upon hovering over it. This is what I've got right now:
html:
<body>
<img src=imgmonochrome.jpg id=img1>
</body>
css:
#img1 {
position: top right;
height:49%;
width:49%;
transition: content 0.5s ease;
}
#img1:hover {
transition: content 0.5s;
content: url('imgcolor.jpg');
}
The image will switch, but will not fade in.
I've looked all over for answers on this, but I can't find any that use just HTML and CSS (cause I'm illiterate in javascript/jQuery ((but going to learn very soon for this very reason)))
Help would be appreciated.
YES, this is possible... But not in the traditional sense.
In order to accomplish this, you'll need to forgo <img />, and instead make use of two images presented with content: url() in :before and :after pseudo-classes. Set the :before to be your starting image, and :after to be your target image. Then set the opacity of :after to 0 by default, and set the two pseudo-elements to sit on top of one another. Finally, set a :hover rule for both :before and :after which toggles their opacity, and use transition: opacity to control the fade.
This can be seen in the following:
* {
margin: 0;
}
.image:before {
content: url("https://via.placeholder.com/150/FF0000/00FFFF");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:after {
position: absolute;
left: 0;
opacity: 0;
content: url("https://via.placeholder.com/150/00FFFF/FF0000");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:hover:after {
opacity: 1;
}
.image:hover:before {
opacity: 0;
}
<div class="image"></div>
Remove content from the transition and use img tag to set image
<img src="imgmonochrome.jpg" id="img1">
#img1 {
position: top right;
height:49%;
width:49%;
transition: 0.5s ease;
}
#img1:hover {
opacity: 0.3;
background: url(imgcolor.jpg);
}
Alternatively,
<img src="imgcolor.jpg" id="img1">
#img1 {
filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .5s ease-in-out;
}
#img1:hover {
filter: none;
-webkit-filter: grayscale(0);
}
I've been trying to create the following: Showing an image and when hovering over it, on the image a score will show, which fades in. I'm almost there, except for the fading in part.
My CSS:
.profile-image10 {
opacity: 1;
}
.profile-image10:hover .overlay {
position: absolute;
width: 100%;
height: 100%;
left: 510px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0.1;
}
<div class="profile-image10">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" />
<span class="overlay"></span>
</div>
I've created this fiddle:
https://jsfiddle.net/1wusom4m/
As you can see it currently fades out when hovering, which is the opposite of what I want. So of course the opacity is set the wrong way around, but if I set it to a low value in the .profile-image10 it affects the original image as well. I'm quite new to this, so have been experimenting a lot to get this far, but I'm stuck now. So how can I make it fade in the score when hovering over the image? Or am I approaching this all wrong?
Three things.
Don't depend all style properties for your overlay on :hover state. Only those you want to change on :hover of the image.
Always define the transition property for the original state. You can change the reverse transition by additionally specifying it on the :hover state.
You div is a block level element, which by default grabs as much horizontal space as available. Putting the :hover on the div results in the fade effect being triggered even if you hover right of the picture (which probably is unwanted).
.profile-image10 .overlay{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 585px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.profile-image10 a:hover + .overlay {
opacity: 1;
}
<div class="profile-image10">
<img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" />
<span class="overlay"></span>
</div>
Fiddle: https://jsfiddle.net/1wusom4m/3/
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
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'd like to have a plain color rectangle slowly fading into an image when hovered.
How can I do that ?
You can use an element covering a div using absolute positioning and with a background disappearing when hovered:
#a {
position:relative;
background: url(https://dystroy.org/re7210/img/curryPouletDecoupe-600.jpg);
width:500px;
height:50px;
}
#a::after{
position: absolute;
left:0; right:0; top:0; bottom:0;
background:red;
opacity: 1;
z-index:2;
content:"";
transition: opacity 1s;
}
#a:hover::after {
opacity: 0;
transition: opacity 4s;
}
<div id=a></div>
A CSS transition on opacity makes the change gradual. Of course you can use concrete elements rather than pseudo elements using this idea.
try something like this
html:
<div class="my-div"> hover me </div>
css:
.my-div{
background: #0f0;
}
.my-div:hover{
background: url("urlToImg");
transition: background 1s ease;
}
when you hover the .my-div element it will change its background slowly in 1s
You may use CSS Transitions for this:
.img-hover {position: relative;}
.img-hover span {background-color: #000; width: 100px; display: block; height: 100px; position: absolute; left: 0; top: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.img-hover span:hover {opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.img-hover img {display: block;}
<div class="img-hover">
<span></span>
<img src="http://placehold.it/100x100" />
</div>
I bought this template a couple of days ago and there is a hover effect which I would like to change. Right now is it like this , that you see couple of pics and if you go with your mouse over it , it will hover ( in gold and some text ) . What im trying is that I would like to change it. I would like to have it at first in this gold way and after you go with the mouse over it , it should be clear.
I'm sitting now since three days on it and I dont know what to do. There are so many script files.
<div class="portfolio-item border portrait fashion">
<div class="portfolio-item-hover">
<div class="portfolio-item-hover-info">
<hr/>
<h3>Schuppenflechten</h3>
<hr/>
</div>
</div>
</div>
here is one of the html code and on this page you can see my problem. It would be very nice if you can help me test
.portfolio-item-hover {
opacity: 0;
}
change opacity to .9 here.
and
.portfolio-item: hover {
opacity: .9;
}
chage opacity to 0 here.
It works..
In your css file fineliner.css, line 836, look for the following
.portfolio-item:hover .portfolio-item-hover {
opacity: 0.9; //change this to 0
}
.portfolio-item-hover {
background: #C5AE87;
height: 100%;
opacity: 0; //change this to 0.9
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
transition: opacity .18s ease-in-out;
-moz-transition: opacity .18s ease-in-out;
-webkit-transition: opacity .18s ease-in-out;
-o-transition: opacity .18s ease-in-out;
}
That's it