I have an un-ordered list of 12 images in 3 colons x 4 rows gallery.
When hovered a tranform scale is applied.
How can i set the transform origin for (3n+1) images ( images 1-4-7-10 ) to LEFT
and for 3nth (3 -6-9-12)element to RIGHT?
Im tryng to enter the html and the css here, but got error messages.
You didn't specify the y value desired for your transform origin (so I suppose is 0), but if you're applying the scale to the images this should work (add prefixes for specific vendors)
li:nth-child(3n+1) img {
transform-origin : 0 0;
}
li:nth-child(3n) img {
transform-origin : 100% 0;
}
This is the code and how i think to get it formatted by css.
I put a draft working example on the site vsio.ru.
I want the first fourth seveth .... (3n+1)image when hovered been 2 times bigger [tranform:scale(2)]
and transform origin set to left and third 6-th 9-th......(3n) a transform origin set to right.
( IS IT POSSIBLE A APPLY A PSEUDO CLASS( HOVER) TO A PSEUDO ELEMENT (NTH-CHILD)? AND HOW? )
`
section#gallery{
Width:670px;
}
section#gallery ul li{
display:inline;}
section#gallery ul li img{
width: 215px;
height:150px;
border: 2px solid #fff;
margin: 5px 0px 0px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
}
section#gallery ul li img:hover {
-webkit-transform:scale(2) ;
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-box-shadow:1px 1px 2px 1px #999999;
}
`
Related
So I'm trying to remove all hover features and auto loading from my site so I commented out all the code that is related to the :hover feature in my site but there is still hovering available.
I'm also trying to remove all the available auto load features like the loader transform and animations. I did but I still see both hovering and some animations.
Is there something that I could be missing?
Like this hover and transform features below I removed them
.cateogory ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-2 {
transition: all 0.4s ease;
}
In your code it looks like there is a typo
cateogory
.category ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-2 {
transition: all 0.4s ease;
}
If that does not solve You may create another class and copy all inside and change its classname with javascript
<!-- language: lang-css -->
.category ul li a:hover:before {
transform: scale3d(1, 1, 1);
transform-origin: 0 50%;
}
.category-nohover ul li a:hover:before {
}
.category-2 {
transition: all 0.4s ease;
}
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
Code: https://jsfiddle.net/xakhLafd/
Hello,
I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix this by setting:
-webkit-transition-property: height,width;
But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.
Here's the code:
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
width: 100px;
height: 100px;
}
.thumbnail:hover {
position:relative;
top:-50px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.
However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."
A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.thumbnail:hover {
transform: scale(5);
}
Here is the fiddle I created that fixes the issue. I got rid of position relative and set the height to auto instead of 100px.
here is the code i did.
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg"
class="thumbnail"/>
.thumbnail{
width: 100px;
height: auto;
position:relative;
}
.thumbnail:hover {
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
Sorry forgot to update the fiddle here is the new link.
https://jsfiddle.net/xakhLafd/1/
If you want something simple, this is code I'm working on atm:
.box img {
margin: 1rem auto;
border: 2px solid white;
cursor: pointer;
transition: all .5s ease;
}
.box img:hover {
border-radius: 10px;
transform: scale(1.5);
}
I'm working on the metro tiles menu for website, I cant use any JavaScript only html and css.
Problem is with sliding tiles and direction of slide, furthermore when box slide next one is hiding under.
#block4 - DOWN
#block5 - UP.
#block4:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
}
#block5:hover {
position: absolute;
z-index: 2;
background: rgba(150,150,150,0.95);
width: 100%;
height: 50px;
overflow:hidden;
transition: height 450ms;
-moz-transition: height 450ms;
-webkit-transition: height 450ms;
height: 300px;
z-index: 2;
Example on JSFiddle - https://jsfiddle.net/werk13/7tza9yqq/
Check this out.
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all; // this dude
transition-duration: .5s; // this dude
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}
Another Demo.
#toggle + label {
position:absolute;
cursor:pointer;
padding:10px;
background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease; // right here
}
#toggle + label:after {
content:"Open"
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
padding:5em 3em;
}
If you want block#3 to float, you must not "change" the other elements around it, since the browser will "reposition" all elements upon any change you made.
Since you said you can't use any JS in the code - there are a few ways I see you can you to handle it:
1. Make the elements fixed position. This way the none of the elements will change when you hover other elements (and change their own style).
2. Use "hidden" elements. Create new element, which is exactly as #block4 - we will call id #block4dup - same content, same position - everything is the same. It will have an absolute position and opacity: 0. the :hover you want will be on #block4dup:hover, and this will change the opacity/height and everything you need. This element will also be positioned absolute, so it will not affect your other floating elements on that page.
Not such a good solution (much duplicate content) but since you can't use any JS here they will both work and give you "good" results.
I want to style a metro-like gallery. I already achieved this in an example with background-images:
http://codepen.io/DanielCoding/pen/jlrgv
But I want to replace the background-images by ordinary image-tags in divs. Unfortunately all images are stretching themselves in the bottom-right direction:
http://codepen.io/DanielCoding/pen/fsKjE/
In the first code I resolved this by give the images different background-position values, but I don't know a similar command for simple image tags or divs.
You could use transform to scale the image and transform-origin to control the direction of the scale.
.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover {
-webkit-transition: -webkit-transform 0.2s;
-webkit-transform: scale(1.2);
}
.star1:hover {
-webkit-transform-origin: bottom right;
}
.star2:hover {
-webkit-transform-origin: bottom left;
}
.star3:hover {
-webkit-transform-origin: top right;
}
.star4:hover {
-webkit-transform-origin: top left;
}
http://codepen.io/anon/pen/oxsge/
The most similar technique to "background-position" that you can use with simple images is "CLIP". Please, look at link in order to understand more about it.
I've replaced the background-images with simple img and check this out if this is what your looking for.
star1,
.star2,
.star3,
.star4{
background-size: 150px;
background-repeat: no-repeat;
background-clip: border-box;
transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: inline-block;
text-decoration: none;
cursor: pointer;
padding:0;
margin:0;
}
.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Pen here