I'm trying to get this affect to work on my material ui card component using react and makeStyles and I really dont know how to translate this affect to the cards, can someone help me tranlsate it to a simple css code so I can use it in MakeStyles? I think my problem is that i dont understand the code on the codepen, if some of you have a similiar codepen and can share it, i'd appreciate it, thanks.
https://codepen.io/chrisdothtml/pen/OVmgwK
/* Reset */
#import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
// variables
$anim-speed: 0.3s;
// main styles
.tiles {
width: 1040px;
font-size: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.tile {
display: inline-block;
margin: 10px;
text-align: left;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
&:before {
content: '';
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.7) 100%
);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: $anim-speed;
}
img {
display: block;
max-width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.details {
font-size: 16px;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: $anim-speed;
transition-delay: 0s;
}
.title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}
.info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
}
&:focus,
&:hover {
&:before,
span {
opacity: 1;
}
&:before {
top: 50%;
}
span {
top: 0;
}
.title {
transition-delay: 0.15s;
}
.info {
transition-delay: 0.25s;
}
}
}
}
The CSS codes you see on CodePen uses SCSS. Click on the CSS Editor dropdown icon -> View Compiled CSS.
Obviously as the name suggests, this will show you the compiled CSS. :)
Related
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
I'm trying to add a cool effect on a button using ::after and transition. But,
it doesn't work as i expected.
I did the following change in scss:
.btn{
&:link,
&:visited{
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
&:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
&::after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
} }
&::after{
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
}
&hover is working as i expected and it gives the proper effect. But,
hover::after isn't working and I can't see my cool effect.Why is this?
I assume this is the effect you are trying to achieve. You need to add a background color to &::after
.btn, .btn:link, .btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
.btn:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
}
.btn:hover:after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn:after{
content: "";
display: inline-block;
background-color: red;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
<a class="btn">Button</a>
I've recently discovered the following approach for text-progress styling and wonder if there is a workaround to grow the element width from the center, so the text would also fill the from center instead of from the left side.
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 15s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<p data-text='Text'>Text</p>
You can achieve that by also animate left and text-indent
I also changed your p to display as inline-block, so it animate the text and not white space.
Thanks to Gaby aka G. Petrioli, it appears Firefox have issue with percent-based text-indent, so I added a CSS hack to overcome that. And again thanks to Gaby, for his now delete answer, that solved the Firefox issue (though unfortunately fails on IE)
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
display: inline-block;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 5s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
left: 50%;
text-indent: -50%;
width: 0;
}
100% {
left: 0;
text-indent: 0;
width: 100%;
}
}
/* Begin - Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
p:before {
width: auto;
right: 50%;
left: 50%;
display: flex;
justify-content: center;
}
#keyframes background-fill {
0% {
right: 50%;
left: 50%;
}
100% {
right: 0;
left: 0;
}
}
}
/* End - Firefox bug fix */
<p data-text='Text'>Text</p>
An alternative to the CSS hack, is a small script, that, on page load, measure the actual width of the element and set the text-indent as px instead of %.
This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here
I've managed to splice together this site for my wedding. I'm banging my head against the wall because I just don't know enough to get this done:
I can set the active attribute on the small gallery section of the site, but the data filter is not filtering the contents to the set active filter on initial page load only.
Example: I can set the active li to any section, and it will highlight it, but it displays all the photos and does not filter by the defined data filters.
Below is the CSS let me know if you need anything else.
/* ===========================================================
13. Small Gallery
============================================================ */
#wedding-gallery {
padding-bottom: 0;
}
#wedding-gallery h3.section-title:before {
margin-left: -17px;
font-size: 38px;
content: "\e00c";
}
#gallery-filter {
text-align: center;
line-height: 90px;
margin-bottom: 0;
}
#gallery-filter li {
display: inline-block;
line-height: 14px;
margin: 0 5px;
}
#gallery-filter li:last-child {
border-right: 0;
}
#gallery-filter li a {
font-size: 14px;
color: #666666;
padding: 8px 15px;
letter-spacing: 1px;
}
#gallery-filter li a:hover,
#gallery-filter li.active a {
background-color: #fff;
padding: 8px 15px;
border-radius: 6px;
}
#gallery-wrapper > div {
width: 25%;
overflow: hidden;
position: relative;
}
#gallery-wrapper > div img {
width: 100%;
display: block;
margin: 0;
}
#gallery-wrapper > .block.gallery img {
position: absolute;
z-index: 1;
top: 0;
}
#gallery-wrapper > .block img {
backface-visibility: hidden;
-webkit-transition: all 700ms;
-moz-transition: all 700ms;
transition: all 700ms;
transform: scale(1.1) rotate(0.1deg);
-ms-transform: scale(1.1) rotate(0.1deg);
-webkit-transform: scale(1.1) rotate(0.1deg);
-o-transform: scale(1.1) rotate(0.1deg);
-moz-transform: scale(1.1) rotate(0.1deg);
}
#gallery-wrapper .block .portfolio-hover,
#gallery-wrapper .block .video-hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
text-align: center;
background: rgba(255, 140, 137, 0.7);
-webkit-transition: opacity 400ms ease 0s;
-moz-transition: opacity 400ms ease 0s;
transition: opacity 400ms ease 0s;
cursor: pointer;
z-index: 5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#gallery-wrapper .block .portfolio-info {
position: absolute;
display: table;
width: 100%;
height: 100%;
}
#gallery-wrapper .block:hover .portfolio-hover,
#gallery-wrapper .block:hover .video-hover {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
}
#gallery-wrapper .portfolio-title {
display: table-cell;
height: 100%;
vertical-align: middle;
color: #fff;
text-transform: uppercase;
font-size: 16px;
padding: 0 35px;
}
#gallery-wrapper .portfolio-title span {
display: block;
color: #fff;
font-size: 12px;
}
.load-more {
margin-top: 55px;
text-align: center;
}
.load-more a {
color: #D9C6B1;
}
/* Portfolio isotope Animation
======================== */
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/* ===========================================================
14. Twitter
============================================================ */
#twitter h3.section-title:before {
content: "\e00d";
font-size: 40px;
}
#twitter .vibe {
margin-bottom: 0;
}
#twitter .tweet {
font-size: 14px;
margin-top: 25px;
}
#twitter .time {
display: block;
font-size: 12px;
text-transform: uppercase;
}
#twitter .follow {
display: block;
margin-top: 55px;
font-weight: 700;
text-transform: uppercase;
color: #D9C6B1;
}
#twitter .follow:hover {
color: #FF8C89;
}
/* ===========================================================
15. Gift Registry
============================================================ */
#gift-registry h3.section-title:before {
content: "\e009";
}
.small-box {
text-align: center;
margin-top: 25px;
margin-bottom: 0;
}
.small-box li {
position: relative;
display: inline-block;
width: 160px;
height: 150px;
margin: 10px;
padding: 7px;
background: #fff;
}
.small-box li a.product {
display: inline-block;
width: 100%;
height: 100%;
line-height: 130px;
border: 1px solid #efe7df;
text-align: center;
}
.small-box li a img {
vertical-align: middle;
}
/* 5.1. Gift Money
============================================================ */
.small-box .money {
border: 1px solid #efe7df;
height: 100%;
border-radius: 25px;
}
.small-box .amount {
display: inline-block;
margin-top: 20px;
font: 28px/32px'Playfair Display', serif;
font-style: italic;
font-weight: 700;
color: #FF8C89;
}
.small-box .donate {
position: absolute;
bottom: 35px;
left: 27px;
z-index: 999;
color: #D9C6B1;
}
.small-box .donate:hover {
color: #FF8C89;
}
.small-box .donate:active {
top: 76px;
}
The answer is in your custom.js, actually -- here's the part relevant to that gallery:
$('#gallery-filter a').click(function() {
$('#gallery-filter li.active').removeClass('active');
$(this).parent().addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
Basically, that's the declaration of how those filter buttons on the gallery work. When clicked, they call $container.isotope, which is what actually handles the filtering and hiding of inactive elements. So if you want to set that on page load, you can invoke the same method but pass it a different filter. Does that make sense, or should I get into it in more detail?
EDIT: Adding more info here.
Since this whole js file is being called on document ready, this is pretty simple - you should be able to immediately "fake" a click on the button you want. Try putting this line in custom.js, immediately after the code above:
$('#gallery-filter a[data-filter=".FriendsandFamily"]').trigger('click');
What that should do is simulate a click on the Friends and Family button, making it active. You can do the same for the other tabs by changing the "data-filter" part of that line to match what's on them in the html. (If that doesn't work, let me know.)