I'm struggling with centering the modal together with fade in and scale up:
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
The absolute positioning approach with transform:translate(-50%,-50%); isn't working for me. It has to be responsive so I can't use the margin-left approach. Do you have an idea why it is simply not displayed in the middle?
Please try this,
Add this style to md-modal-wrapper class. added a md-modal-wrapper div to cover md-modal class
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
Remove this style
.md-modal {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width:100%;
max-width: 550px;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
body{
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="md-trigger">Show</button>
<div class="md-modal-wrapper">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
</div>
</body>
scale(1) was overriding the other transform property, translate(-50%,-50%).
It can be easily fixed by combining them both: transform: translate(-50%,-50%) scale(1).
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: translate(-50%,-50%) scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
How about using flex?
Remove position: absolute; and transform: translate(-50%,-50%); from md-modal
and cover the modal with flex div
.md-container {
display:flex;
justify-content:center;
align-items:center
}
<div class="md-container">
<div class="md-modal">
~~
</div>
</div>
I don't know how to use snippet so I'm attaching a codePen link 😂
https://codepen.io/seongmin0801/pen/MWyrYvm
Make transform: translate(-50%,-50%) !important;. There is .md-show.md-effect-1 { transform: scale(1); } that overrides it that's why you should use important
Related
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 3 years ago.
I have a jsfiddle here and animation named fromBottom is not working.
http://jsfiddle.net/8g5r2qcw/1/
html
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
relevant css
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
animation: fromBottom .5s ease-out;
}
I expect the button to move from bottom to its original position when page is loaded.
Try adding display: inline-block; to your .btn--animated and it'll work.
.header
{
background-image: url(https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/f_auto,q_auto,w_1100/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg);
background-blend-mode: multiply;
height: 80vh;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 70%);
position: relative;
}
.header::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #34c9eb, #0c4f5e);
opacity: 0.9;
z-index: -1;
}
.header__logo-box
{
position: absolute;
top: 5px;
left: 0;
width: 80px;
}
.header__logo
{
width: 100%;
height: 100%;
}
.header__text-box
{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary--main
{
display: block;
}
.heading-primary--sub
{
display: block;
}
.btn
{
padding: 10px 30px;
text-decoration: none;
color: inherit;
border-radius: 100px;
position: relative;
}
.btn--white
{
background-color: #fff;
}
.btn::after
{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .4s;
background-color: red;
z-index: -1;
border-radius: 100px;
}
.btn:hover::after
{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
display: inline-block;
animation: fromBottom .5s ease-out;
}
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
I'm not used to develop much html outside premed templates and now I'm having an awesome opportunity to venture through this.
My Layout https://i.stack.imgur.com/hZJEM.png
I'm having the toughest days of my life tying to put the in codes. Could some good some give a starting point?
I still have no codes for this, I have bunch of codes for trial, but none of them could achieve what I want.
Is there anyone who could help me please?
here is an example of your image with skew column while running the snip will only show code , to see full example please download resources from download link
here is a live view of what is the result
and here is my code which been used for the skew :
position: absolute;
left: 27%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;
}
download
here an example of skew css code :
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
#import url("https://fonts.googleapis.com/css?family=Lato:300,800");
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: #f7720c;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #f7720c;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events: none;
}
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: #000000c7;
display: block;
transition: cubic-bezier(0.62,-0.79, 0, 1.71);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#menu .wrapper {
opacity: 0;
-webkit-transform: translate(0, 40px);
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
}
#menu .wrapper ul {
list-style-type: none;
text-align: center;
color: #fff;
}
#menu .wrapper ul li:first-child {
padding-top: 0;
}
#menu .wrapper ul li {
padding-top: 1.5em;
}
#menu .wrapper a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: #f3f3f3;
transition: color .3s ease-in-out;
}
#menu .wrapper a:hover {
color: #f7720c;
}
#menu.active {
-webkit-transform: translate(0, 0%);
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.box-with-text {
background-image: url('https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&h=700&q=75&w=1050');
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.box-with-text {
position: relative;
margin-top:50px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-repeat: repeat;
background-position: 50% 50%;
background-size: cover;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:95px;
font-family:Oswald, Impact;
}
.box-with-text-2 {
background-image: -webkit-linear-gradient(seagreen 50%, lightseagreen 80%);
background-repeat: repeat;
background-position: 0 0;
background-size: 100% 50px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
#-webkit-keyframes stripes {
100% {
background-position: 0 -50px;
}
}
#keyframes stripes {
100% {
background-position: 0 -50px;
}
}
.box-with-text-2 {
position: relative;
display:block;
margin-top:50px;
left: 50%;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:82px;
font-family: bold Open Sans, Impact;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
fill: none;
stroke-width: 6;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #F2385A;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #F5A503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #E9F1DF;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56D9CD;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3AA1BF;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
#-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
#keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
/* Other styles */
svg {
position: absolute;
left:0;
right:0;
width: 250px;
height: 250px;
margin:0 auto;
}
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:600,700,800,900' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/styletxt.css">
<link rel="stylesheet" href="./css/styletxt.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<style>
.bodybg {
font-family: helvetica, arial, sans-serif;
background-image: url(./background.png);
height: 90%;
width: 100%;
background-size: cover;
overflow: hidden;
z-index: 1;
background-repeat: no-repeat;
background-color: black;
position: absolute;
left: 0;
top: 5%;
box-shadow: -1px -3px 20px 0px #333333fa;}
.col {
background: #ddd;
width: 33%;
height: 100%;
float: left;
position: relative;
cursor: pointer;
-moz-transform: skew(-5deg, 0deg);
-webkit-transform: skew(-5deg, 0deg);
-o-transform: skew(-5deg, 0deg);
-ms-transform: skew(-5deg, 0deg);
transform: skew(-5deg, 0deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.col:first-of-type {
background: #fff;
margin-left: -50px;
padding-left: 50px;
}
.col:last-of-type {
background: #f7d00c;
margin-right: -50px;
padding-right: 50px;
}
.col:hover {
background: #900;
color: #fff;
}
.col-content {
position: absolute;
width: calc(100% - 40px);
bottom: 0;
padding: 20px;
text-align: center;
-webkit-transform: skew(5deg, 0deg);
-moz-transform: skew(5deg, 0deg);
-ms-transform: skew(5deg, 0deg);
-o-transform: skew(5deg, 0deg);
transform: skew(5deg, 0deg);
}
.col:first-of-type .col-content,
.col:last-of-type .col-content {
width: calc(100% - 90px);
}
}
#import url('https://fonts.googleapis.com/css?family=Lato:300,800');
$menu-bg-color: #f7580;
$content-color: #f7580;
$background-color: #f3f3f3;
$links: #f3f3f3;
body {
display: flex;
// flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: $background-color;
font-family: 'Lato', sans-serif;
}
div {
position: relative;
height: 60px;
width: 110px;
cursor: pointer;
}
span {
width: 110px;
height: 7px;
background: $content-color;
position: absolute;
transition: all .4s ease-in-out;
}
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: $content-color;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.one {
top: 50%;
right: 0;
width: 90px;
transform: translate(0%, -50%);
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%,-50%);
color: $content-color;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events:none;
}
// menu styling
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: $menu-bg-color;
display: block;
transition: all .3s ease-in-out;
transform: translate(0, -100%);
.wrapper {
opacity: 0;
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
ul {
list-style-type: none;
text-align: center;
color: #fff;
}
ul li:first-child {
padding-top: 0;
}
ul li {
padding-top: 1.5em;
}
a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: $links;
transition: color .3s ease-in-out;
&:hover {
color: darken($links, 25%);
}
}
}
}
#menu.active {
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
.menuinteract{
position:absolute;right:6%;top:4%;z-index:88888;height:100px; background-image:url("./menudisabled.png");
background-size:cover;
}
.menuinteract:hover{
position:absolute; right:6%; top:4%;z-index:88888;height:100px; background-image:url("./clicked.png");
background-size:cover;}
</style>
<script>
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
</script>
</head>
<body style="overflow:hidden;background-color:black">
<div class="menuinteract" "
<div>
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="text">MENU</span>
</div>
<nav id="menu">
<div class="wrapper">
<ul>
<li>About</li>
<li>Work</li>
<li>Journal</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div style="height: 100%;width: 100%;text-align:center;">
<div class="bodybg">
<div class="col" style="position: absolute;
left: 17%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;">
<div class="col-content">
</div>
<div style="position:absolute; top:5%;z-index:10000;">
<!-- animated txt here >
<svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- <svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- Duplicate symbols -->
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
</svg>
</div>
-->
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</html>
I tried to replicate a border hover effect but I didn't understand why I need to use ::before and ::after to do this Css effect.
This is the page example with the content that I want to replicate with css (I want to replicate the border effect):
http://77.238.26.244:81/confimi/pagina-di-test/
This is the homepage where I tried to replicate the css:
http://77.238.26.244:81/confimi/
In the first row there is the "example" and in the row below there is my attempt
This is the code that I made:
round {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border scale3d(0, 1, 1);
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
You cannot animate borders from the middle natively in css. They will auto transition from the starting point of the div (or from the opposite end if you want to use a transform: rotate(180deg)). Hence, the usage of the ::before & ::after elements.
Also, transform: border scale3d(0, 1, 1); is invalid as border is not a CSS3 property applicable to transform.
If you do not want to use the pseudo elements, then you can use a late appearance of the border on the overlay. However it won't animate from the middle.
Modify your css as:
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transition: border 0.75s;
}
EDIT
If you do want to use the pseudo selectors, apply the following css:
.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after {
height: 100%;
top: 0;
width: 100%;
left: 0;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.div-diviso .overlay:before, .div-diviso .overlay:after {
content: '';
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9;
}
.div-diviso .overlay:after {
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
border-top: 3px solid #20bed0;
border-bottom: 3px solid #20bed0;
}
.div-diviso .overlay:before {
width: 100%;
height: 0;
position: absolute;
top: 50%;
left: 0;
border-left: 3px solid #20bed0;
border-right: 3px solid #20bed0;
}
I want to disable transform in my child div. Here is fiddle. Is it possible to disable scale for class .image-text ?
.photo:hover{
transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
}
.photo:hover >*{
transform: none;
}
make a new child element and call your image on it.
here you can see http://jsfiddle.net/rajjuneja49/s3hWj/879/
May be you were looking for this....
You can see these example.
.element{
width: 400px;
height: 550px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.main-photo-area {
position:relative;
display: block;
overflow: hidden;
}
.main-photo-area img.photo{
transition: all 0.3s ease;
width: 100%;
}
.main-photo-area:hover img.photo{
transform: scale(1.4);
}
.image-text {
background: rgba(34, 90, 159, 0.6);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3em 3em 4.25em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.image-text:hover {
opacity: 1;
}
<div class="element">
<div class="main-photo-area">
<img class="photo" src="http://heavytable.com/wp-content/uploads/2012/11/wine-glasses-650-325.jpg"/>
<a class="over" href="/szablon/?id=single">
<div class="image-text">
<h2>Titel</h2>
<p>Desc</p>
<span class="icon">Look</span>
</div>
</a>
</div>
</div>
I'm working on an onhover text translate animation.
I've seen most responses to this question on StackOverflow/Google, and have tried to apply all the fixes, but none of them seem to work.
In firefox, it's just the -moz-transform: translate3d(0,-200px,0);that blurs, but in Chrome the entire time it's blurred.
Here's the fiddle I'm working on.
Option 1
Try this hexagon for smoother text
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg);
background-size: auto 346.4102px;
background-position: center;
cursor: pointr;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
.text {
position: absolute;
top: 220px;
left: 80px;
right: 0;
bottom: 0;
font-size: 2.6em;
color: #000;
z-index: 999;
opacity: 0;
transition: all ease 0.6s;
}
.hexagon:hover .text {
opacity: 1;
top: 70px;
}
.hexagon:hover {
background-color: #fff;
}
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
<div class="text">Option1</div>
</div>
Option 2
Use this example its responsive
http://codepen.io/web-tiki/pen/HhCyd
body {
font-family: 'Open Sans', arial, sans-serif;
background: #fff;
}
* {
margin: 0;
padding: 0;
}
#categories {
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 27.85714285714286%;
/* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%;
/* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2) {
margin: 0 1%;
}
#categories li:nth-child(6n+4) {
margin-left: 0.5%;
}
#categories li:nth-child(6n+4),
#categories li:nth-child(6n+5),
#categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li * {
position: absolute;
visibility: visible;
}
#categories li > div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
}
/* HEX CONTENT */
#categories li img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
#categories div h1,
#categories div p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 0, 0, 0.5);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1em;
padding-top: 100%;
padding-bottom: 100%;
}
#categories li h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
#categories li p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
#categories li div:hover p {
top: 50%;
padding-top: 10%;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 1</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 2</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
<li>
<div>
<img src="https://0.s3.envato.com/files/53859088/Green-Leaf-Texture_01-1_Preview.jpg" alt="" />
<h1>Option 3</h1>
<p>Some sample text about the article this hexagon leads to</p>
</div>
</li>
</ul>