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.
Related
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.
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>
Looking at most of the examples in bootstrap, I see that sidebars have css of left:250px and margin-left:-250px.
Why not just have left: 0px which would give the same result?
Example:
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
I noticed in one project that used the practice, there were various #media queries that changed the sidebar to have different widths (and therefore different corresponding values for left and margin-left) at different window sizes.
One feature of doing this is that to hide the sidebar, one could simply call left: 0, and it would move the sidebar by its full width regardless of the current width of the sidebar. This is better than using display: none because it can be animated to slide off of the screen, and different than calling width: 0 because the sidebar could still be visible in the case that it wasn't going off-screen.
For example:
$("button").click(function() {
$(".sidebar, .content").toggleClass("hiddenSidebar");
});
body { margin: 0 }
.content {
left: 100px;
position: relative;
transition: all 0.4s ease 0s;
}
.sidebar {
width: 100px;
left: 100px;
margin-left: -100px;
height: 500px;
background: black;
position: fixed;
transition: all 0.4s ease 0s;
}
#media (max-width: 767px) {
.content { left: 50px; }
.sidebar {
width: 50px;
left: 50px;
margin-left: -50px;
}
}
.hiddenSidebar { left: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div>
<div class="content">
<button>Toggle Sidebar!</button>
</div>
I have made a sliding text button that slides upward when hovered. Here is the example: http://jsfiddle.net/kEQq4/
How to make it sliding not only upward, but also downward, leftward or rightward?
Here is my code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
color: white;
font-weight: bold;
text-decoration:none;
text-align: center;
display:block; /* important */
}
.blue-btn, .first-link{
-webkit-transition: 1.8s;
-moz-transition: 1.8s;
-ms-transition: 1.8s;
transition: 1.8s;
}
.blue-btn{
height: 64px;
width: 200px;
line-height: 64px;
overflow: hidden;
background-color: #3b5998;
}
.blue-btn:hover{
background-color: #ff0000;
}
.first-link{
margin-top: 0;
}
.blue-btn:hover .first-link{
margin-top: -64px;
}
</style>
</head>
<body>
<div class="blue-btn">
<a class="first-link" href="#"> First Text </a>
Second Text
</div>
</body>
</html>
I've never used css before so I can't verify that you're doing this the right way (feels more like a hack to me) , however, using your code as the base, I modified it so that it slides to the left.
Take a look :) http://jsfiddle.net/kEQq4/20/
a{
color: white;
font-weight: bold;
text-decoration:none;
text-align: center;
display:block; /* important */
}
.blue-btn, .first-link{
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.blue-btn, .second-link{
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.blue-btn{
height: 64px;
width: 200px;
line-height: 64px;
overflow: hidden;
background-color: #3b5998;
}
.blue-btn:hover{
background-color: #ff0000;
}
.first-link{
margin-top: 0px;
margin-left: 0px;
}
.second-link{
margin-top: -64px;
margin-left: 300px;
}
.blue-btn:hover .first-link{
margin-left: -300px;
}
.blue-btn:hover .second-link{
margin-left: 0px;
}
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.