I am trying to make my div fade in and out with only css. Could someone please help me.
.overlay {
display: none;
}
.image:hover .overlay {
box-sizing: border-box;
display: block;
height: 100%;
left: 0;
-moz-box-sizing: border-box;
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
width: 100%;
}
I would suggest using the opacity property that can be animated with transition.
Try the following:
#container {
position: relative;
width: 50px;
height: 50px;
}
img {
width: 100%;
height: 100%;
background-color: black;
}
.overlay {
position: absolute;
background-color: blue;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out; /* for compatibility with older versions of Opera */
-ms-transition: opacity 1s ease-in-out; /* for compatibility with IE and Edge */
-moz-transition: opacity 1s ease-in-out; /* for compatibility with Firefox */
-webkit-transition: opacity 1s ease-in-out; /* for compatibility with Chrome, Safari... */
}
#container:hover>.overlay {
opacity: 1;
}
<p>Try hovering over the image:</p>
<div id="container">
<img>
<div class="overlay"></div>
</div>
Note: <img> is a self-contained tag. That is, it cannot contain elements.
You will need a wrapping div as shown in the example with a container that contains both your image and the overlay.
I hope this helps.
Related
I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work):
transition:background-image 0.2s ease-in-out;
.panel {
width:200px;
height:200px;
background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
transition:background-image 0.2s ease-in-out;
}
.panel:hover {
background:#000;
transition:background-image 0.2s ease-in-out;
}
<div class="panel"></div>
You can use this code:
Demo is here: https://output.jsbin.com/yadiwoviwe
.panel {
position: relative;
background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
width:200px;
height:200px;
transition: background-color 0.2s ease-in-out;
}
.panel:hover {
background-color: rgba(0,0,0,.5);
}
.panel:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
}
Unfortunately, you can't do this in this way.
The reason is that you're trying to animate the background-image property - a property that isn't animatable.
Instead, you can use a cool little trick that uses a pseudo-element to create the background image instead:
.panel {
width: 200px;
height: 200px;
position: relative;
background: pink;
}
.panel::after {
content: "";
position: absolute;
pointer-events: none;
background: url(https://unsplash.it/200) center center no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
will-change: opacity;
transition: opacity .1s ease-out;
}
.panel:hover::after {
opacity: 0.5;
}
<div class="panel"></div>
Inspired by this cool little article on CSSTricks
Alternatively, you can manipulate the opacity of the image.
.panel {
width: 200px;
height: 200px;
background: #000;
position: relative;
color: white;
text-align: center;
}
.panel:after {
content: "";
background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
background-size: 200px 200px;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.panel:hover:after {
opacity: 0;
}
<div class="panel"><h1>Text</h1></div>
Outdated answer, transition with image working currently with CSS.
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
background-image instead of 'all' and you'll see.
I'm having problems with getting any form of transition on this hover. I want it to appear a little slower than just abruptly when hovering over it. So maybe just a delay? Or an ease? Anyway I can't seem to get any of these things to work.
.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}
.forum-image:hover .descriptionbox {
visibility: visible;
}
.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png">
<div class="descriptionbox">
Testtesttest
</div>
</div>
Instead of using "visibility:hidden" try changing just the opacity, like so:
.forum-image:hover .descriptionbox {
opacity: 0.8;
}
And then put the transition code on the description box:
.descriptionbox {
/* Other properties... */
padding: 10px;
opacity: 0; /* Start opacity at 0, changes when hovered... */
transition: opacity 0.3s ease-in;
}
Now the description box has the transition property, and when the image is hovered, the new opacity is applied (with the transition time set in the original class). Then that new opacity class is removed when the mouse exits the area.
Make sure you remove
visibility: hidden;
from the original code, or you'll never see anything! (This messed me up at first when i was trying to fix it)
Here is a JSfiddle for demonstration
.forum-image {
position: relative;
display: inline-block;
}
.descriptionbox {
position: absolute;
background: #ffffff;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.descriptionbox:hover {
opacity: 1;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png" />
<div class="descriptionbox">
Testtesttest
</div>
</div>
I have alot of CSS and its throwing me off. I need an image to become less opaque when I hover on it and a child element, but the child element slides in when the image is hovered on. I got half of it to work, but the image returns to full opacity when the child element is hovered on. I can't get the selector right. Here is whats working now http://www.fuzionvideos.com/#video_recent
Here is the code:
<ul><li id="vid_link" class="box 1"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth"> <span class="caption description">Armor of the Lord: Belt of Truth</span><b class="title_line">Belt - Truth</b></li></ul>
and the CSS:
#vid_display .box {
cursor: pointer;
height: 199px;
overflow: hidden;
width: 300px;
float: left;
position: relative;
}
#vid_display .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: absolute;
left: 0;
}
#vid_display .box .caption {
position: absolute;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#vid_display .box .description {
height: 90px;
width: 300px;
display: block;
bottom: -140px;
line-height: 25pt;
text-align: left;
padding-left: 8px;
line-height:normal;
}
#vid_display .box:hover .description {
-moz-transform: translateY(-150%);
-o-transform: translateY(-150%);
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}
and on jsfiddle : http://jsfiddle.net/blalan05/FkV2z/
You're applying opacity to the hovered image. So, when you hover on anchor, the image is no longer hovered. Try applying the :hover for the .box, so when you will hover on the anchor (which is a child of .box) the .box will be still considered as hovered.
Change this:
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
to this:
#vid_display .box:hover img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Can someone please tell me what am I doing wrong here about transition? Because transition animation does not work at all, neither in chrome nor in opera browser.
Thank you.
<!doctype html>
<html lang="en">
<head>
<title>ttt</title>
<style type="text/css">
body {font: 13px sans-serif; }
#montage-wrap {width: 820px; height: 200px; }
.montage-block {width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;}
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("square.png");
-webkit-transition: top .3s; }
.montage-block:hover #block1 { top: -180px; }
.thumb_content { }
</style>
</head>
<body>
<div id="montage-wrao">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_vontent">
<h1>title</h1>
<p>subtitle</p>
</div>
</div>
</div> <!-- montage wrap -->
</body>
</html>
please try to at following css.
I can't see in your css transition for other browsers without webkit.
http://jsfiddle.net/8jQbN/
CSS:
-webkit-transition: all 3s ease; /* Firefox */
-moz-transition: all 3s ease; /* WebKit */
-o-transition: all 3s ease; /* Opera */
transition: all 3s ease; /* Standard */
}
Add top:0; for #block1 in css since you want to animate "top" element.You can change the value if you want to. The animation will works.
body {
font: 13px sans-serif;
}
#montage-wrap {
width: 820px;
height: 200px;
}
.montage-block {
width: 200px;
height: 200px;
float: left;
display: block;
overflow: hidden;
position: relative;
}
#block1 {
width: 200px;
height: 200px;
position: absolute;
display: block;
background:red;
top:0;
-webkit-transition: top 1s ease-in-out;
-moz-transition: top 1s ease-in-out;
-o-transition: top 1s ease-in-out;
transition: top 1s ease-in-out;
}
.montage-block:hover #block1 {
top: -180px;
}
.thumb_content { }
I'm sorry if this is not the solution for your problem.
I have this code for a banner that will reveal a drop down section when hovered over:
The HTML code below:
<div id="top_wrapper" class="hori_wrapper wrapper">
<div id="top" class="hori_banner banner"></div>
<div id="top_reveal" class="hori_reveal reveal"></div>
</div>
And the CSS:
.wrapper {
border: dashed;
position: relative;
}
.banner {
background: blue;
position: relative;
}
.reveal {
background: red;
position: absolute;
z-index: 1;
}
.hori_wrapper {
width: 300px;
height: 50px;
clear: both;
}
.hori_banner {
width: 300px;
height: 50px;
}
.hori_reveal {
width: 300px;
height: 0px;
}
#top:hover + #top_reveal, #top_reveal:hover {
-webkit-transition: height 1s ease-in .5s;
-o-transition: height 1s ease-in .5s;
-moz-transition: height 1s ease-in .5s;
-transition: height 1s ease-in .5s;
height: 300px;
top: 50px;
}
Basically, what I'd like to know is: how does CSS determine that it should animate downwards and not some other direction?
Thanks!
All that happens is that it transitions to what would happen if the property was set normally.
In other words, if the height was 300px, and the top was 50px, what would it look like?
It's nothing more complex like that, and is why for browsers that don't support transitions things still work, just with no animation.