How can you apply a translate to an element but make it move to a point on the page rather than relative to itself?
For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for it to move to the center of the page.
<html>
<head>
<style>
.face {
-webkit-backface-visibility: hidden;
position: absolute;
height: 140;
width: 80;
overflow: hidden;
}
.card {
height: 100;
width: 80;
float: left;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
margin-left: 5px;
-webkit-transition-property: transform;
-webkit-transition-duration: 0.25s;
-webkit-transition-timing-function: ease-out;
}
.activated {
-webkit-transform: scale(2) translate(50px, 100px);
-webkit-transition-duration: 0.35s;
-webkit-transition-timing-function: ease-in;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.card').click(function (e) {
e.preventDefault();
$(this).toggleClass("activated");
});
});
</script>
</head>
<body>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
</body>
</html>
I don't think you should be using translate() for that. I suppose you could simply calculate the correct values or manipulate the transform-origin using JavaScript, but that kind of defeats the purpose of using CSS transforms.
You can animate properties as well, so you could remove the translate() from .activate and change the transition property for .card to:
-webkit-transition-property: all;
You can then use "regular" CSS to do the positioning and the transition will do the rest. E.g. add these properties to .activated:
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;
There is rather a bit of a problem with that, though. While CSS can smoothly transition the top, left and margin properties nicely, it can't smoothly transition the position property, so when a card gets activated it'll jump to the top left first and then move smoothly to the center of the page.
I'm not sure if there's a solution to that other than positioning the original cards absolutely as well.
Also, using the translate(), the position of the other cards isn't affected when you activate one of them. In my example, though, the activated card is taken out of the flow, so the other cards will move left to fill up the gap (as floating elements do). That might not be what you want either. That wouldn't happen if you absolutely position all of them to start with, though.
Of course, there are plenty of questions in the specs themselves about issues like this considering they're still experimental:
CSS 2D Transforms
CSS Transitions
Related
do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.
We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.
I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).
First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.
z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>
For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/
I am building my own website with Dreamweaver. I have an portfolio page with an gallery which I used from this tutorial: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950
The images from the tutorial are smaller but I want them bigger like: 324 by 322 px.
Also they make a columm of 4 images next to each other and I want to have 3 to each other.
But when I try that, my images don't go perfectly next to each other.
Here is what I have:
<div class="portfolio">
<article class="entry video">
<a data-rel="prettyPhoto" href="#">
<img class="top" src="images/knop-1.jpg" alt="">
<span class="magnifier"></span>
</a>
</article>
(this article div repeats for every new image)
Some of the CSS:
.portfolio {
width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px;
}
.magnifier {
background:url(images/knop-hover1.jpg) no-repeat center;
width:324px;
height:322px;
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
img.top {
position:absolute;
left:0;
right:5px;
}
I hope you guys can help me out.
Thanks!
It looks like you're missing the JQuery from the tutorial. You'll need to add that before it all works like the demo. I notice you're missing a closing /div tag and your img tag should close itself at the end like this: /> instead of just >.
If you want three images instead of four you can make them auto center by applying a width to a surrounding div that encompasses the individual images. Then that surrounding div needs to be inside a larger content div or main div. The main div will have a set width, floated left. Then you can set margin:0 auto; for the surrounding div and it will center everything. You can add some margin to the single image divs to give them some breathing room, too. I made a code snippet so you can see visually what I mean.
.main {
width: 700px;
float: left;
display: block;
background: pink;
}
.surrounding {
width: 510px;
display: block;
margin: 0px auto;
}
.single {
width: 150px;
float: left;
margin: 10px;
}
.single img {
width: 150px;
height: 150px;
}
<div class="main">
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
</div>
An observation, though. 3 images at 324px width are going to be at least 976px when side by side. That is larger than the width you've set for your page. Maybe you're referring to their sized once clicked?
I am using transit.js to apply CSS transforms and translations with JQuery, but seem unable to reset back to a start position for an infinite carousel navigation.
This is my HTML, where each image has a loader over the top:
<nav>
<div class="strategy-icon">
<div class="icon">
<div class="loader"></div>
</div>
<h3>Strategy</h3>
</div>
<div class="planner-icon">
<div class="icon">
<div class="loader"></div>
</div>
<h3>Planner</h3>
</div>
<div class="finder-icon">
<div class="icon">
<div class="loader"></div>
</div>
<h3>Finder</h3>
</div>
<div class="network-icon">
<div class="icon">
<div class="loader"></div>
</div>
<h3>Network</h3>
</div>
</nav>
To set the initial state I just use CSS, so no loader is shown:
.loader {
position: absolute;
width: 215px;
left: -215px;
height: 100%;
background: rgba(255, 255, 255, 0.3);
}
The surrounding <div> hides the loader with the overflow setting:
.icon {
width: 100%;
height: 0;
padding-bottom: 57.5%;
display: inline-block;
position: relative;
border: 1.5px solid rgb(0, 30, 65);
margin-bottom: 1.25%;
overflow: hidden;
}
Then on each change of the active item in the carousel, or by clicking on the navigation I have used many variations of JQuery to make sure the loader is hidden, before it can animate back in:
$('nav > div > .icon > .loader').css({
left: -215
});
$('nav > div:nth-child(' + globalCounter + ') > .icon > .loader').transition({
left: 0,
duration: intervalDuration,
easing: animationStyle
});
The reference to globalCounter is just an incremental variable that counts along with setInterval, and the variable that set intervalDuration is an integer set earlier in my script. Similarly, animationStyle is a string set as a variable earlier in my script.
Can anyone shed any light on why the JQuery CSS reset still applies the transition effect, rather than reseting instantly, without animation?
SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.