How do I rotate a button in vuetify and move it to the right edge as shown in below picture.
1. Button's height should be as same as of the page.
2. Button's label should be on top and vertical as shown below.
Click
#button1 {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform-origin: bottom right;
margin-left: 280px;
margin-top:-63px;
}
p{
align-items: flex-top;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform-origin: bottom;
}
Related
when I perform npm run serve everything work as intended.
when I perform npm run build there is "no error".
when I loot at the website the images can't be seen, then I inspect element I see the image opacity in my gallery section changes to 1%.
this is my template code:
<div class="gallery container">
<div
class="images"
v-for="(image, index) in images"
:key="index"
>
<img :src="image.small" #click="selectImage(index)" />
</div>
</div>
My scss code:
<style lang="scss" scoped>
.gallery-wrapper {
padding: 3rem 0;
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
.images {
display: flex;
justify-content: center;
align-items: center;
img {
height: auto;
cursor: pointer;
width: 100%;
opacity: 85%;
border: 5px solid aliceblue;
&:hover {
opacity: 100%;
transition: 0.5s;
border: none;
margin: 5px 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
}
}
}
}
</style>
other images are working fine. only the gallery images changes opacity when performing npm run build.
I look at the dist folder it generated a class with 1% opacity.
build result dist/css/app.ae40bac8.css:
.gallery-wrapper .gallery .images img[data-v-c5a51ec0] {
height: auto;
cursor: pointer;
width: 100%;
opacity: 1%;
border: 5px solid #f0f8ff;
}
.gallery-wrapper .gallery .images img[data-v-c5a51ec0]:hover {
opacity: 1%;
-webkit-transition: 0.5s;
transition: 0.5s;
border: none;
margin: 5px 0;
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
it seems the webpack generated the wrong opacity.
Something that worked for me is using 0.85 instead of 85%
I'm trying to write a Vue.js transition that slides out an element and at the same time slides in another one. I almost have it working, but the elements bump each other when the animation starts.
Here is my CodePen and the code:
// pug/jade
#app
.elems
transition-group(name="elem")
li.elem(v-for="(elem, index) in elems"
v-if="index === currentElem"
#click="currentElem = currentElem === 0 ? 1 : 0" :key="index") {{ elem
// stylus
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
position:relative
.elem
display: block
text-align: center
font-size: 30px
padding: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)
// js
new Vue({
el: '#app',
data() {
return {
elems: ['hello there', 'hello yourself'],
currentElem: 0
}
}
})
You need absolute position of the .elem as i understand what you want.
otherwise they cant colide
try this css:
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
width: 100vw
position: relative
overflow: hidden
.elem
display: block;
position: absolute
top: 50%;
left: 50;
margin-top: -30px;
margin-left: -150px
text-align: center
width: 300px
height: 60px
line-height: 60px
vertical-align: middle
font-size: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)
stack!
I have an animation that is assigned to the class .slide
I have on hover on a div, when I hover over the div I want the animation class be assigned to another div. Using CSS animations.
I'd appreciate the help and thanks!
Code:
http://codepen.io/iheartkode/pen/wWMQmG?editors=0110
share-container {
position: relative;
width: 150px;
height: 75px;
background: #FF5722;
border-radius: 10px;
cursor: pointer;
&:hover {
// assign animation class to the share-icons class
}
p {
text-align: center;
color: white;
}
}
.share-icons {
position: absolute;
z-index: -2;
top: 15px;
left: 4px;
margin: 0 auto;
width: 120px;
height: auto;
padding: 10px;
background: coral;
text-align: center;
color: white;
font-size: 2em;
cursor: pointer;
}
.slide {
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
Edited after your clarification:
Change this in your HTML:
<div class="share-icons slide">
And this in your SCSS:
&:hover .slide {
// assign animation class to the share-icons class
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
And then adjust the animation as needed.
And here's a fork in action:
http://codepen.io/denmch/pen/WxrLQZ
heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox
Is it possible to scale(transform) the size of the div, from center point? i tried but i can't get the result.
this is the code :
div {
height: 100px;
width: 100px;
-webkit-transition: height, width,left,top, 1s;
-webkit-transform-origin: 50% 50%;
background: red;
position:absolute;
left:30%; top:30%;
}
div:hover {
width: 150px;
height:150px;
-webkit-transition: height, width, 1s;
background: red;
}
jsfiddle