I try to make image gallery using bootstrap and my custom CSS. I want to make if the user hover on the image, the picture will getting bigger on its place. Everything is done by only using css but I have a little problem regarding the grid of my image. When I hover the most right image, the position will be mess. Here is my experiment : http://hanzoclothing.com/lookbook/chapter-iii
CSS:
.lookbook-item{
position: relative !important;
}
.lookbook-item:hover{
z-index: 5;
}
.lookbook-item .thumb{
opacity: 1 !important;
}
.lookbook-item .thumb img{
-webkit-transition: all 1s ease-in-out;
transition: all 0.3s ease-in-out;
}
.lookbook-item .thumb:hover img{
position: absolute;
min-width: 600px;
max-width: 600px;
margin-top: -40px;
margin-left: -50px;
/* top: 200%;
left: 23%;*/
z-index: 6;
}
I'd be tempted to use transform: scale(xxx); for this. It will do exactly what you want without effecting other elements:
.lookbook-item .thumb:hover img {
/* position: absolute; */
/* min-width: 600px; */
/* max-width: 600px; */
/* margin-top: -40px; */
/* margin-left: -50px; */
z-index: 6;
transform: scale(2);
}
If you want to keep the offset you currently have, you could use the following:
transform: scale(2) translate(50px, 40px);
Related
I have animation with using transform:translate(-100%) and transition, but when i load page my block is moving from 0% to -100%;
in normal condition she have to have transform:translate(-100%) and when checkbox is checked - transform:translate(0%)
It works well but on load is moving from o to -100%
https://katehrybkova.github.io/ETmenu/index.html - link on github-page
https://github.com/katehrybkova/ETmenu - source
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
position: absolute;
transform: translateX(-100%);
transition: 1s;
}
#idishka:checked~.menuBlock {
transform: translateX(0);
}
The animation starts with .menuBlock at left: 0, that's why transform: translateX(-100%) starts fading it to the left.
Maybe you can replace translateX function with left, because you have .menuBlock with fixed width.
This is the final code:
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
transition: 1s;
position: absolute;
left: -400px;
}
#idishka:checked ~ .menuBlock {
left: 0;
}
I don't recommend you using fixed widths (in pixels), for responsivity issues ;)
I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.
Here is a webpage that has the css slider:
http://melodywai.com/sodium.html
And here is a snippet of the CSS stylesheet that relates to the arrows:
.carousel-wrapper { position: relative; }
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
height: 500px;
width: 750px;
margin-left: auto;
margin-right: auto;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.
Thanks!
try adding
.carousel-wrapper .carousel-item .arrow:hover{
//do something
}
you can target them this way.
a.arrow.arrow-prev:hover {
}
a.arrow.arrow-next:hover {
}
to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:
a.arrow.arrow-prev:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-prev.png"); // to change the arrow img
}
a.arrow.arrow-next:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-next.png"); // to change the arrow img
}
this is a simple solution and it will look good with the transition effect.
Tell me if this helps you or you need more suggestions
Here is a simple horizontal flip animation - http://jsfiddle.net/vntajmgh/2/
and I see 2 issues:
Open the url in chrome. Hover over the red div. The flip is ok, but the background color for the back div(blue) is not applied.
Open the url in firefox. The flip is like stuck. I can see the blue colored back div sometimes.
I guess it's 'stuck' here because the height is 100vh, which when reduced works fine, but should it not work with the full height too?
.flip-container {
width: 150px;
height: 100vh;
perspective: 800px;
color: #fff;
position: relative;
}
.flipper {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform linear 0.6s;
}
.flipper div {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flipper .front {
background: red;
}
.flipper div:after {
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
width: 100%;
height: 100%;
opacity: 0.5;
z-index: 1;
}
.flipper .back {
background: blue;
transform: rotateY(180deg);
}
.flipper:hover {
transform: rotateY(180deg);
}
<div class="flip-container">
<div class="flipper">
<div id="1front" class="front">1-front</div>
<div id="1back" class="back">1-back</div>
</div>
</div>
UPDATE:
Here is the working fiddle - http://jsfiddle.net/gf3g8sz1/1/
Add an overflow hidden to the parent div(flip-container). When we are using 100vh(view port height) with rotate transform property, its actually taking more height than the view port has. so hide it by using overflow hidden.
css
.flip-container {
overflow:hidden;
}
To get the same hover effect in both browser you have to modify the hover CSS.
DEMO
removing:
backface-visibility: hidden;
will make the back color visible
The problem in Chrome is caused by the pseudo element. I have changed the way to get the image blended with red without an pseduo element, and now it works OK.
The problem in FF is caused by the reduced-disappeared size of the element that receives the hover. I have changed the hover so that it is triggered by the container, and now it works also ok.
It is always a good idea to avoid using hover on transformed elements, they usually give some kind of problems
.flip-container {
width: 150px;
height: 100vh;
perspective: 800px;
color: #fff;
position: relative;
}
.flipper {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform linear 0.6s;
}
.flipper div {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flipper .front {
background: red;
background-image: linear-gradient(rgba(255,0,0,0.5),rgba(255,0,0,0.5)), url("http://www.transparenttextures.com/patterns/3px-tile.png");
}
.flipper .back {
background: blue;
transform: rotateY(180deg);
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
<div class="flip-container">
<div class="flipper">
<div id="1front" class="front">1-front</div>
<div id="1back" class="back">1-back</div>
</div>
</div>
The problem description refers to the following example: http://codepen.io/NilsWe/pen/yoksj
The background of the .main container flickers on the CSS transition in all webkit browsers.
Any of the solutions out there like:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
doesn't seem to work.
Are there any other suggestions?
Try removing
//-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
//-webkit-transform-style: preserve-3d;
That has worked for me in the past.
Also the flickering can be caused by not defining the size of the manipulated element. Make sure you define the height and width of elements that are being manipulated.
I think that there is a conflict between the position of the navbar and the main.
I have changed the positioning from float to absolute, and moved things changing left instead of margin-left; I think that now it works ok
CSS
.nav,
.main {
position: absolute;
height: 100%;
padding: 5em 0 0 0;
background: rgb(150,150,150);
text-align: center;
#include transition(margin-left 5s ease, margin-right 5s ease, left 5s ease);
}
.nav {
width: 30%;
left: -30%;
}
.main {
width: 100%;
margin-left: 0;
margin-right: 0;
background: rgb(200,200,200);
background: url(http://farm6.staticflickr.com/5476/9299430029_08b1ea7494_h.jpg) no-repeat bottom center;
#include background-size(cover);
}
/* ========== active state ========== */
.active-nav .nav {
left: 0%;
}
.active-nav .main {
left: 30%;
margin-right: -30%;
}
demo
Updating the width and height fixed the issue for me.
I've created a basic 3D cube using CSS and <div>s. However, when it animates, the sides are not "overlapping" properly. It's a bit hard to explain, so see the http://jsfiddle.net/JNCNr/ to see precisely what I mean. I've read through some SO posts, the MDN, and so forth, but I am not quite sure what is causing my issue. I simply want the sides to behave properly when they rotate behind each other.
EDIT: Right now it's working for Chrome only.
Here is some of my CSS:
.container {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
/* for 3d animations */
-webkit-perspective: 800;
}
.box {
/* size */
height: 100px;
width: 100px;
position: absolute;
-webkit-user-select: none;
cursor: move;
/* color */
opacity: 1;
background: -webkit-radial-gradient(#666, #333);
border: 1px solid black;
/* 3d stuff */
-webkit-transform-origin: 50px 50px -50px;
}
.s1 {
-webkit-animation: as1 4s linear infinite;
}
#-webkit-keyframes as1 {
from {
-webkit-transform: rotate3d(0, -1, 0, -270deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
}
}
Thanks~!
Apply backface-visibility: hidden to hide the parts of element that have been rotated to show the backface:
.s1, .s2, .s3, .s4 {
-webkit-backface-visibility: hidden;
}
Updated jsFiddle