I am confused with soemthing most likely quite simple, but I can't figure it out. I want Image 2 to cover Image 1 when I hover over Image 1.
So, the goal is to overlap Image 1 with an Image 2 containing a semi-transparent color gradient. I know this could somehow be achieved with pure CSS, but I need it this way.
The below CSS Code was taken from another Typo3 CMS Website and there it works.
However, I can't seem to make it work on another part/element of that Typo3 website, I even can't make it work on a simple basic HTML page like this one.
<!DOCTYPE html>
<html>
<body>
<style>
.container {
height: 300px;
width: 500px;
position: relative;
background-color: red;
}
img {
position: relative;
height: 100%;
width: 100%;
}
.container .hover-second-image-over-first-image:hover {
width:100%;
height:100%;
background-image:url(image_02.jpg);
background-position:top left;
background-repeat: no-repeat;
background-size:100%;
position:absolute;
opacity:0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
</style>
<div class="container">
<div class="hover-second-image-over-first-image"></div>
<img src="image_01.jpg" />
</div>
</body>
</html>
Edit:
Ok, so "z-index:10;" did fix it for me. This code here works:
.container {
height: 300px;
width: 500px;
position: relative;
background-color: red;
}
img {
position: relative;
height: 100%;
width: 100%;
}
.container .hover-second-image-over-first-image {
width:100%;
height:100%;
background-image:url(image_02.jpg);
background-position:top left;
background-repeat: no-repeat;
background-size:100%;
position:absolute;
z-index:10;
opacity:0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container:hover .hover-second-image-over-first-image {
opacity:.3;
}
But I still wonder why the code worked before on that other website WITHOUT any z-index position...
A few things to keep attention here :
Don't put your styles inside the <body> tag
Try to style the layer you want to see over the image whitout the use of the :hover state so it must be .container .hover-second-image-over-first-image
Use the :hover action on all the .container element
.container {
height: 300px;
width: 500px;
position: relative;
background-color: red;
}
img {
position: relative;
height: 100%;
width: 100%;
}
.container .hover-second-image-over-first-image {
width: 100%;
height: 100%;
background:blue;
opacity:0;
position: absolute;
top:0;
left:0;
z-index:10;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container:hover .hover-second-image-over-first-image {
opacity:.7;
}
<div class="container">
<div class="hover-second-image-over-first-image"></div>
<img src="http://placehold.it/200" />
</div>
Related
I wanting a header bar that slides vertically into view from negative top.
Rather than simply appears as if being behind a curtain.
The following is animated using height :-
https://jsfiddle.net/AaronNGray/kf0br46u/31/
HTML
<div id="box">
<div id="content">AaronNGray</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
width: auto;
background: transparent;
transition: all 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
height: 0px;
transition: all 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 50px;
top: 0px;
}
What I need is to be able to animate top so the content div slides downwards from off the top of the screen.
This is what I have tried but it does not work :-
https://jsfiddle.net/AaronNGray/kf0br46u/40/
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
top: -50px;
width: auto;
background: transparent;
transition: top 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
top: -50px;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: top .8s ease;
-moz-transition: top .8s ease;
-ms-transition: top .8s ease;
-o-transition: top .8s ease;
}
#box:hover > #content {
top: 0px;
}
Hope you can help and its probably something simple I am missing, usually is :)
There are a couple of problems.
First, positioning with e.g. top does not work if the element's position is not defined (and if it is, the positioning is in relation to the first ancestor which itself is positioned).
Second, the box element is positioned at -50px (half its height) which is fine, but the content is put -50px which would put it at -100px (if it were positioned at all).
Here's a snippet with your code with these two things altered:
body {
margin: 0px;
padding: 0px;
position: relative;
}
#box {
height: 100px;
top: -50px;
width: auto;
transition: top 0.4s ease-in-out;
position: relative;
}
#content {
overflow: hidden;
position: relative;
top: 0px;
width: auto;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
}
#box:hover #content {
top: 50px;
}
<div id="box">
<div id="content">AaronNGray</div>
</div>
StackOverflow has a monopoly on Google and the Internet and is abusing this by stopping people asking questions that they really need to ask in order to do their work. You may regard this question as stupid but theres no where else you cn get CSS answers anymore you have killed off all the other CSS forums !!!!!
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.
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.
As you resize the window, the floating divs will wrap to the next line as expected. But I would really like this layout change to be animated.
EDIT: As an aside, it would be nice to find a solution to this that does not depend on JQuery. I don't mind writing my own js if I need to. Ideally I'd like to implement this into a AngularJS directive once I see it working, hence hence why I don't want the jQuery dependency.
Here is a shortened version of my code: http://jsfiddle.net/cDS7Q/3/
HTML
<div id="content">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
And here is my CSS
body {background-color: #333;}
#content div {
position: relative;
float: left;
background-color: #eee;
margin-left: 10px;
margin-bottom: 10px;
width: 100px;
height: 100px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#content {
margin-top: 50px;
padding-top: $gutter;
padding-bottom: 50px;
overflow: hidden;
width: 100%;
}
The effect I'm trying to achieve is similair to this site: http://saffron-consultants.com/journal/
Resize the window to see the blocks animate into their new positions.
You could try quicksand for this.
http://razorjack.net/quicksand/
It is possible with css, but only if you change parameters with media queries.
For example:
If you change the width of an element, or the padding and margin with media queries, than you will get an animation.
Also, if you position divs absolute or relative and change the positions in the media queries then it work.
But not with simple floating / wrapping. For that you will need JavaScript / jQuery.
for example add this to your fiddle:
body {
background-color: #333;
}
#content div {
position: relative;
float: left;
background-color: #eee;
margin-left: 20px;
margin-bottom: 20px;
width: 200px;
height: 200px;
-webkit-transition: all .7s ease;
-moz-transition: all .2s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#content {
margin-top: 50px;
padding-top: $gutter;
padding-bottom: 50px;
overflow: hidden;
width: 100%;
}
#media screen and (max-width: 480px) {
#content div {
margin-left: 10px;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
}
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.