http://jsfiddle.net/egEq2/
.badge {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
width: 100%;
height: 100%;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
.product-action {
display: inline-block;
}
.product-action:hover .back {
-webkit-transform: rotateY(0deg);
}
.product-action:hover .front {
-webkit-transform: rotateY(-180deg);
}
... works, but flips too slow, can I change the speed?
Also, can I add width somehow so the flip looks like a board and not a thin paper? :)
Thanks!
You specified the speed already:
-webkit-transition: -webkit-transform 1s ease-in;
^^
Change it to something like 0.3s: http://jsfiddle.net/egEq2/1/
Related
I'm currently creating an SPFX application that uses fluent UI for my forms. I find material UI a bit challenging to use and I wanted something straightforward like fluent UI but I'm trying to modify the CSS of the dropdown component to have the label float when focusing on the dropdown element. something like this codepen here:
so far its not working based from the tutorials I have followed probably because of the structure of the Dropdown component when rendered to the browser. Is it possible to do it in fluent UI?
this is how I targeted the specific element:
<Dropdown
placeholder='Select '
selectedKey={this.state.selectedRequestType}
options={this.requestTypesOption}
onChange={this.onDropdownChange}
label="Select Category*"
className={styles.floating}
/>
and in my SCSS file:
.floating {
margin-bottom: 2rem;
background-color: var(--field__background);
transition: background-color 0.2s ease;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.floating > div:first-of-type {
padding: 1.8rem 1rem 0.6rem;
font-size: 1rem;
border-bottom: 0.1rem solid var(--input__border);
transition: border-color 0.2s ease;
caret-color: var(--color__accent);
}
.floating label {
display: block;
position: relative;
max-height: 0;
font-weight: 500;
pointer-events: none;
}
.floating label::before {
display: inline-block;
filter: blur(0);
transform-origin: left top;
transition: transform 0.2s ease;
left: 1rem;
position: relative;
}
.floating label::after {
bottom:1rem;
content: "";
height: 0.1rem;
position:absolute;
transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
opacity 180ms cubic-bezier(0.4,0,0.2,1),
background-color 0.3s ease;
opacity: 0;
left: 0;
top:100%;
margin-top: -0.1rem;
transform: scale3d(0,1,1);
width: 100%;
}
.floating > div:first-of-type:focus + .floating label::after {
transform: scale3d(1,1,1);
opacity:1;
}
.floating > div:first-of-type:placeholder-shown +
.floating label::before {
transform: translate3d(0,-2.2rem,0) scale3d(1,1,1);
}
.floating label::before,
.floating > div:first-of-type:focus + .floating label::before {
transform: translate3d(0,-3.12rem,0) scale3d(0.82,0.82,1);
}
the output looked like this.
https://www.toriiteppanyaki.com/vertical-fixed-navigation/
this is the page i am testing. whenever i click on the dot navigation to scroll to particular section, it stuck for a second before it can move again. anyone face this before? I am using this code from codyhouse and applying it in my Divi WordPress theme.
< script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" > < /script> <
script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script> <
script >
jQuery(document).ready(function($) {
var section_items = $('.sectionnav'),
navigation_items = $('#navigation a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
navigation_items.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
$('.scroll_down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateNavigation() {
section_items.each(function() {
$this = $(this);
var activeSection = $('#navigation a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if ($this.offset().top - $(window).height() / 2 < $(window).scrollTop() && $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop()) {
navigation_items.eq(activeSection).addClass('is-selected');
} else {
navigation_items.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate({
'scrollTop': target.offset().top
},
600);
}
}); <
/script>
<style>ol,
ul {
list-style: none;
}
</style><style>#navigation {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
#navigation li {
text-align: right;
}
#navigation a {
display: inline-block;
}
#navigation a:after {
content="";
display: table;
clear: both;
}
#navigation a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#navigation a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#navigation a:hover .label {
opacity: 1;
}
#navigation a.is-selected .dot {
background-color: white;
}
#navigation a.is-selected .label {
opacity: 1;
}
#navigation .dot {
position: relative;
/* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #000000;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#navigation .label {
position: relative;
margin-right: 10px;
padding: .1em .1em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav_trig {
display: none;
}
</style>
I want to add :hover this class ".pic".
So it can contain more description on .pic:hover
I use transform SASS, width, and height on .pic:hover that seems not working.
I can't find out the problem.
Please help to find out my question.
Please watch it on my codepen for any details
.pic
width: 250px
height: 250px
//it doesn't get bigger when mouse is hovering over it
.pic:hover
width: 400px
height: 400px
Codepen
Your code isn't formatted correctly. With CSS, make sure to surround everything with brackets {}. Also make sure to add a semicolon after every line in a class so it knows where to break it up. Change your code to the below and it'll work:
// Adding {} and ; fixed this issue
.pic {
width: 250px;
height: 250px;
}
.pic:hover {
width: 400px;
height: 400px;
}
You can do something like this,
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
<div class="item">
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
Your code,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox"><img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt=""/></div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
or zoom out with text inside,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
h5 {
position: absolute;
left: 0px;
top: 0px;
bottom: 0;
z-index: -1;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(0.65);
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox">
<h5>
Tech-Background
</h5>
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="" />
</div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
Your problem is wrong css. You have to use curly braises and semi colons as well.
.pic{
width: 250px;
height: 250px;
}
.pic:hover{
width: 400px;
height: 400px;
}
I'm trying to make a custom follower alert for Twitch TV. And I'm trying to centre a small image inside a div. So far I've managed to centre it horizontaly but no matter what I try it will not centre vertically. I'm not sure why, i've tried reading many other questions on stackoverflow already, as well as following a guide from W3schools but I think this is more of a specific problem to my code. Here is a fiddle. (You can't see the image but you can see where the image would be)
And here is the code; with the idea being that the image is centered both horizontally and vertically inside the small blue square, which i've named 'left-square-container'. However currently the image is horizontally centered at the top of the div only.
If anyone can help I'd appreciate it.
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
6% {
transform: translateY(0);
}
98% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
#keyframes slideInFromTheLeft {
0% {
opacity: 1;
transform: translateX(-100%);
}
4.4% {
opacity: 1;
transform: translateX(0);
}
97% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft-Text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
overflow: hidden;
/*hide elements when they overflow*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 100px;
height: 100px;
background: #0d47a1;
position: relative;
display: inline-block;
float: left;
z-index: 1;
transform: translateX(-100%);
animation: 9.6s 1 slideInFromAbove;
/* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/
{
display: block;
margin: 0 auto;
webkit-filter: drop-shadow(1px 1px 1px #212121);
filter: drop-shadow(1px 1px 1px #212121);
}
.right-retangle-container {
width: 400px;
height: 100px;
opacity: 0;
background: #292929;
border-top: 5px solid #0d47a1;
box-sizing: border-box;
display: inline-block;
float: left;
position: relative;
/* needed for z-index*/
z-index: 0;
/*place under left square*/
transform: translateX(-100%);
animation: 8.8s .6s 1 slideInFromTheLeft;
/* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.text {
font-size: 30px;
color: #ffffff;
overflow: hidden;
text-align: center;
/*vertical alignment of text*/
position: relative;
/*horizontal alignment of text*/
top: 50%;
/*horizontal alignment of text*/
transform: translateY(-50%);
/*horizontal alignment of text*/
}
.text-animation {
transform: translateY(100%);
animation: .5s 1s 1 slideInFromBelow;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
margin-left: 20px;
margin-right: 20px;
}
.keyword:not(.user_message) {
color: #f57f17;
}
<div class="follower-container">
<div class="left-square-container">
<div class="icon">
<img class="image" src="{image}" />
</div>
</div>
<div class="right-retangle-container">
<div class="text">
<div class="text-animation">
New Follower <span class='keyword name'>{name}</span></div>
</div>
</div>
</div>
There are several ways to do this, but since you're already using flexbox, I would recommend continuing with that path.
On your .left-square-container div, simply change display to display:flex and then set align-items: center; and justify-content: center;.
Seems to work for me.
Fiddle
If you know the height of the container, you can set the line-height of said container to the value of its height.
I updated your CSS to look like so:
.icon {
text-align: center;
heignt: 100px;
line-height: 100px;
}
The "icon" div does not have any specified height. It is declared block. Hence, you cannot expect to align an image inside this div vertically as the scope of the div height-wise on the screen will be only of the size of the image.
Even in the in css of "icon", you have said margin:0 auto; -> The command will align the image in center not vertically but only horizontally. For what you want to happen, that 0 should be auto and then there should be some height of the div to see it align in the center vertically as well.
Does anyone know how to show the 'mmenu icon-bar' at the right side of the page in stead of the left?
body {
overflow-x: hidden; }
.mm-page {
background: inherit;
min-height: 100vh;
position: relative;
-webkit-transform: translate(60px);
transform: translate(60px);
padding-right: 60px;
}
.mm-menu:first-child, .mm-menu.mm-current {
display: block; }
Try moving the padding from right to left and the translate from left to right:
.mm-page {
-webkit-transform: translate(-60px);
transform: translate(-60px);
padding-left: 60px;
}