I have a list with one item on the list transitioning to the northeast when I hover over it. Using margin-top and margin-left property transitions worked but the item being hovered over kept pushing other elements so I added position:relative and tried using top and left transition properties but it didn't seem to be working.
Here is the jsfiddle:
list hover
Add left, top default
link demo
left: 0px
Have you tried setting the parent of your list. I know sometimes relative has issue unless the underlying item is also relative or absolute. Just a thought.
Use position:absolute and it will take it out of the normal document flow. You could also give it z-index:5 to make sure it floats over other elements.
.transition{
transition: all .4s;
-moz-transition: all .4s;
-webkit-transition:all .4s;
-o-transition: all .4s;
margin-top:20px;
border:1px solid gray;
width:80px;
padding:10px;
margin-left:50px;
position:relative;
cursor:pointer;
}
.hover_top{
top:0;
}
.hover_top:hover{
top:-10px;
}
.hover_left{
left:0;
}
.hover_left:hover{
left:-10px;
}
.hover_right{
right:0;
}
.hover_right:hover{
right:-10px;
}
<div class="hover_top transition"> Hover Top </div>
<div class="hover_left transition"> Hover Left </div>
<div class="hover_right transition"> Hover Right </div>
You have to define the property where you want to apply the transition effect. For example:
.box { position: relative; transition: all 0.4s ease;}
.box:hover { top: -1rem;}
that will not work. So you have to define top: 0 by default then top -1rem on hover. like
.box { position: relative; transition: all 0.4s ease; top:0}
.box:hover {top: -1rem}
that will work.
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I am trying to edit a wordpress template. My goal is to make movie posters look bigger than now.
This is how it looks at the moment - http://prntscr.com/i30lgt
This is how it looks when i edint height in the css - http://prntscr.com/i30ltf
The changes i made are in this css code:
.loop-container article img.attachment-post-thumbnail {
width: 100%;
height: 450px;
-webkit-transition: opacity 0.175s ease-in-out;
-moz-transition: opacity 0.175s ease-in-out;
-o-transition: opacity 0.175s ease-in-out;
transition: opacity 0.175s ease-in-out; }
How can i make them resize properly and not stretch?
May be this will help you
<div class="article">
<img alt="img" src="thumb-image.jpg" class="attachment-post-thumbnail">
</div>
<style>
.article{
display:block;
overflow:hidden;
width:100%;
height:450px;
}
.article img.attachment-post-thumbnail {
width:100%;
height: auto;
display:block;
}
</style>
Use object-fit:cover; if you want your image to cover the div or whatever.
Or, make height:auto.
object-fit:cover; will crop your image from two sides.
I'm using css3, an image that when you hover over it will slides up like this
I find this example,but I want not the box's background property.
<div class="box">
<img src=image/image.jpg>
</div>
Image source is from html,not css background property
I'm just wondering if anyone can point me to a good tutorial or can help me with it?
Well I've come up with a quick example how you could do it, you can play around change values and improve it. I hope it helps.
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{
width:200px;
float:left;
}
.box:hover img{
margin-top:-200px;
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
transition: margin 1s;
}
Example:
https://jsfiddle.net/pqrnt921/1/
A pure CSS3 slide up transition effect works better if you move the transition properties to the normal state, like this:
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{ /* Normal state */
width:200px;
float:left;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.box:hover img{
margin-top:-200px;
}
This way, on roll Out you'll get a nice transition to the original position.
If you want this to be more universal so you don't have to worry about what image you are using (I mean, you don't have to worry about image width), I propose using background-image, background-position and background-size.
Here is JSfiddle example.
Based on Joe's answer so, thanks Joe :).
For top-to-bottom sliding, you can simply use the following code.
div {
width: 400px;
height: 200px;
background-image: url('https://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fisolpro.in');
background-size: cover;
background-position: top;
transition: all 2s;
}
div:hover {
background-position: bottom;
}
<div>
</div>
BTW, I have used https://snapito.com/ to take fullpage screenshot of my website.
See: http://jsfiddle.net/nweBD/
I'm trying to create a Coverflow like slideshow using CSS3 transitions, but I'm getting different results from different browsers:
FF; shows wanted behaviour (right slide animates from right to center).
CHROME; first positions right slide at left side, then animates to center.
IE10; does nothing
HTML:
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
CSS:
div{
position:absolute;
width: 300px;
height:100px;
background-color: yellow;
margin-left: -150px;
left: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.middle{
text-align:center;
z-index:2;
height:120px;
}
.left{
text-align:left;
left: 0;
right: auto;
margin-left: 0;
background-color:green;
}
.right{
cursor:pointer;
text-align:right;
right: 0;
left: auto;
margin-left:0;
background-color:red;
}
The problem here is indeed that browsers have no, or at best, various results for animating to and from 'auto'.
To fix this, I have re-written the CSS to not use left:auto; right:0; but left:100%; margin-left:-300px. This means I only have to animate the left and margin-left property, and I don't need to reset them to the default auto. The negative margin is the same amount as the width of the element, which pulls it back to the desired position, giving the same result as right:0;.
Here's an updated fiddle: http://jsfiddle.net/nweBD/3/
I am a beginner in this and I am working on my new website. But I am stuck at one point where I want the effect that will make my links fade into images. I am having a navigation-bar on top of my page and when I hover over the link, I want the text to fade out at the same time as a small logo is fading in. And when I hover out of the link I want the image to fade out at the same time as the lin is fading back in, you know?
But when I do this, the image just pops up and fades out at the same time as the link is fading out...
#navigation a[name="project"] {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#navigation a[name="project"]:hover {
opacity:0;
background-image:url(bilder/project.png)
}
The image is the background for the element you're fading out, so it will also fade on hover. You'll need to separate the image into a separate element.
Perhaps you could use absolute positioning inside a container to have the text cover up the image, and then when the text is hovered over, it'll fade out, revealing the image underneath.
A working example of this is at http://jsfiddle.net/y9aw7/
HTML:
<div id="container">
Example Text
<img src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
position: relative;
}
a, img {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
a {
z-index: 1;
line-height: 100px;
text-align: center;
background-color: #fff;
-webkit-transition: 0.4s opacity;
-moz-transition: 0.4s opacity;
-o-transition: 0.4s opacity;
-ms-transition: 0.4s opacity;
transition: 0.4s opacity;
}
a:hover {
opacity: 0;
}
Edit: Further jsfiddle, forked from the fiddle provided by the OP, with corrected CSS: http://jsfiddle.net/JmwdC/1
Try this :
Demo
CSS
#gl{
position:absolute;
left:0px;
width:100px;
height:30px;
opacity:0;
transition:all 0.5s;
}
#gl:hover{
opacity:1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<a href='http://www.google.com/'> <img id=gl src='https://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'>
Google</a>
</body>
</html>
You can use any property you want to achieve this, except display which does not work with CSS3 transition.
The most common techniques make use of
opacity (to 0)
height (to 0)
z-index (to negative / lower value than the container)
Sticking to your example, you can do it by using an background-image in <li>, and changing the opacity to the <a>, no changes to your HTML are needed.
Demo: http://jsfiddle.net/D6wuH/2/
Relevant CSS
li {
/* ... other stuff... */
background:none no-repeat scroll center center ;
}
#navigation li, #navigation li > a{
transition: all 1s ease-in-out;
}
#navigation li > a{
background: white;
}
#navigation li:hover {
background:url(http://dareminnesota.com/images/facebook-like-button.png)
no-repeat scroll center center transparent;
}
#navigation li:hover > a {
opacity: 0;
}
Playing with the difference between the initial state and the hover state of a lot of properties (was X, on hover becomes Y; wasn't there, on hover it's there; was there, on hover it's not there anymore) will let you achieve a world of different results, with weird effects like this: http://jsfiddle.net/D6wuH/0/ :)