I am applying this css transformation to an image in a table when the cursor hover over the image..
transform-origin: bottom right;
-webkit-transform: scale(5) ;
I have tried every which way to get the origin outside the image, but it seems there is no way. If the origin is 'right' the image expands to the left obscuring the original image.
I would like to to put the transform image in a fixed location outside the table altogether! Or at least expose the small image.
* {
margin: 0;
padding: 0;
}
img {
width: 100%;
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
img:hover {
-webkit-transform: translate3d(25px, 25px, 100px);
transform: translate3d(25px, 25px, 100px);
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</div>
</body>
</html>
Instead of using transform-origin: bottom right; use transform: translate3d(25px, 25px, 100px); property. Hope it'll help
Related
How will I add a transition to this CSS code after the hovering effect. The image is a background image of div. What I wanted is to add a transition between the zoom effect.
.animations {
background: url('resources/image.jpg');
background-size: 300px 300px;
height: 250px;
transition: 10s ease-out;
}
.animations:hover {
animation: effect 2s forwards;
}
#keyframes effect {
0%{background-size: 100%}
100%{background-size: 120%;}
}
In .animation and .animation:hover you put something like this:
transition:2s linear;
-webkit-transition:2s linear;
-mos-transition:2s linear;
And in the .animation:hover you put the change you want to make, like:
.animations {
background-color: #000;
transition:0.4s linear;
-webkit-transition:0.4s linear;
-mos-transition:0.4s linear;
}
.animations:hover {
background-color: #fff;
transition:0.4s linear;
-webkit-transition:0.4s linear;
-mos-transition:0.4s linear;
}
In this example it will transition from black to white in 0.4s (change linear to whatever you want)
Please try this code.
<html>
<head>
<style>
.animations {
background-image: url('https://data.whicdn.com/images/273956252/superthumb.jpg?t=1484219209');
background-size: 50% 50%;
background-repeat: no-repeat;
height: 100%;
transition: 10s ease-in;
-webkit-transition:10s ease-in;
-moz-transition:10s ease-in;
}
.animations:hover {
animation: effect 2s forwards;
}
#keyframes effect {
0%{background-size: 50% 50%;}
100%{background-size: 100% 100%;}
}
</style>
<title>css</title>
</head>
<body>
<div class="animations">Images</div>
</body>
</html>
I hope above information will be useful for you.
Thank you.
I am experiencing an issue with CSS3 scaling and Safari (v10.0.1).
I have a selection of grid items with the following structure:
<div class="grid-inline col-12 bp1-col-6 bp3-col-3 index-grid-selector index">
<a href="">
<div class="index-grid-item">
<div class="index-grid-dummy"></div>
<img srcset=", 2x" title="" alt="">
</div>
</a>
</div>
CSS (LESS):
.index-grid-selector {
a {
.index-grid-item {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
.index-grid-dummy {
padding-bottom: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
&:hover {
.index-grid-item {
img {
transform: scale(1.2);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
}
The image is positioned absolutely within the grid item container and then scaled on hover.
During the image scaling in Safari, the image enlarges slightly and appears to shift. Gaps (white lines) appear around the image. Once the animation is complete, the image sits correctly, until the hover function is removed.
I have set up a working demo here to showcase the issue.
http://www.testdomainone.co.uk/test.html
I have tried applying the folowing to the image and its parent, but the issue still occurs.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0)
Does anyone know how this can be fixed?
This does not solve your specific issue using an img tag, though since you use fixed size for your images, why not use background-image
Updated with image-set to achieve the equivalent for background images as srcset does for img ... and since it is more or less only iOS Retina which use that high resolution, it will be a decent fallback for browser not supporting it
.index-grid-item {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.index-grid-dummy {
padding-bottom: 100%;
background-size: 100%;
transition: transform 0.25s ease-in-out;
}
.index-grid-item:hover > div {
transform: scale(1.2);
transition: transform 0.25s ease-in-out;
}
<div class="index-grid-item">
<div class="index-grid-dummy" style="background-image: -webkit-image-set( url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg) 1x, url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large_2x.jpg) 2x );
background-image: url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg)"></div>
</div>
Side note, in above sample I use inline style to set the image source in the markup, as one does with the img tag, and of course this could be set in the CSS as well
i'm just wandering if it is possible using only css resize a div without initial height 220px as in example (to have a responsive div).
If I remove the initial height transition stops to work but div is stil resizing. How to keep transtion while removing 220px height condition.
now i'm using:
.resize{
height: 220px;
width:auto;
background: red;
transition: all 1.0s ease-in-out;
-moz-transition: all 1.0s ease-in-out;
-webkit-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
}
.resize:hover{
height: 340px;
}
<div class="resize">
This is resizable div
</div>
If you define a height to its parent element, then you can use percentage heights to give the container a relative height.
for example:
<body>
<div class="foo">
This container will have a relative height
</div>
</body>
CSS:
body{
height: 500px;
}
foo{
height:50%;
}
I've been trying to apply a CSS3 -webkit-transform effect on a image inside a columns scheme. Currently I've the following demo:
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<style>
div.colSection article {
display: inline-block;
column-break-after: always;
column-break-inside:avoid;
break-inside:avoid-column;
-webkit-column-break-after: always;
-moz-column-break-after: always;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
}
div.colSection.noticias {
column-count: 3;
-webkit-column-count:3;
-moz-column-count:3;
}
img.scale {
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img.scale:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="section main" id="noticias">
<h1>News</h1>
<div class="colSection noticias">
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N1</h2>
<p>T1</p>
</article>
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N2</h2>
<p>T2</p>
</article>
<article>
<img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
<h2>N3</h2>
<p>T3</p>
</article>
</div>
</div>
</body>
</html>
The problem with the code is that the animation tend to end up in strange behaviors, for instance:
Safari
When I place the mouse over the second image, no animation happens but the image just disappears. The first one works as indented and nothing happens on the last one.
Chrome
The middle image goes down and the last one flickers a bit.
I'm trying to use this jQuery to activate my css transitions. Also, upon hovering over the div "box", I wanted this to activate the fade in of another div called "box_content".
Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
div.box{
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #0F0;
opacity: .3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div.box.active{
opacity: 1;
}
div.box_content{
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
opacity: 0;
}
div.box_content.active {
opacity: 1;
}
</style>
<script>
$(document).ready(function()
$('div.box').hover(function() {
$('div.box').toggleClass('active');
$('div.box_content').toggleClass('active');
}
</script>
</head>
<body>
<div class="box"></div>
<div class="box_content">Content</div>
</body>
You had some syntax errors in your jQuery. If you fix those, it works.
http://jsfiddle.net/michaeljimmy/brmF3/
$(document).ready(function() {
$('div.box').hover(function() {
$('div.box').toggleClass('active');
$('div.box_content').toggleClass('active');
});
});
Here you go. :) You were missing a few curly brackets that was throwing an error.
You can play around with it here:
$(function() {
$('div.box').hover(function() {
$(this).toggleClass('active');
$('div.box_content').toggleClass('active');
});
});