I want to have two parts of one image to be join into one original image, where each one part should be a triangle form.
I've found a codepen where there are two elements with nested images, where i removed margins, but there is an ugly white border(gap) between elements.
How can i remove this one?
<div class='pageOption'>
<a href='#' class='option' data-inf='photo'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
</a>
<a href='#' class='option' data-inf='cinema'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
</a>
</div>
body { background: gainsboro; }
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
overflow: hidden;
position: absolute;
/* arctan(27 / 40) = 34.01935deg
* need to skew by 90deg - 34.01935deg = 55.98065deg
*/
transform: skewX(-55.98deg);
}
.option:first-child {
/* left: -.25em; */
transform-origin: 100% 0;
}
.option:last-child {
/* right: -.25em; */
transform-origin: 0 100%;
}
.option img { opacity: 1; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
.option:after {
position: absolute;
margin: .5em 1.65em;
color: white;
font: 500 1.25em Courier;
letter-spacing: .1em;
text-transform: uppercase;
content: attr(data-inf);
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }
Change these styles
.option:first-child {
left: 0.1em;
transform-origin: 100% 0;
}
.option:last-child {
right: 0;
transform-origin: 0 100%;
}
Related
I've got the following CSS and HTML. The problem is, that when the mouse is moved over the button, the red rectangle flashes to the center instead of smoothly moving to the center. It is strange because when the mouse is moved away from the button, it moves back slowly. How can I make the red rectangle move to the center smooth?
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
bottom: -10px;
right: -10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
For some reason, it didn't work with bottom: -10px and right: -10px. I'm not sure if this has to do with my code or if this is a browser problem, but the easy fix is to use the top and left properties instead:
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
top: 10px;
left: 10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
.red-translucent {
background-color: red;
top: 10px;
left: 10px;
}
Use transform instead of top, left, bottom, right like this:
.btn {
position: relative;
display: flex;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
transform: translate(-10px, -10px);
}
.btn .bottom-right {
transform: translate(10px, 10px);
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
transform: translate(0px, 0px);
}
This will work smoothly on either the move-in or move-out of the pointer.
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 have a line created out of a div now what i am trying to do is animate the div color, background grey, then it fills white, then the white fills back to grey like its sliding through. then on hover the line and text slide up about 10px, then when release it goes back to default position.
like this one here at the bottom example
.scroll-indicator {
position: absolute;
left: 50%;
bottom: 0;
z-index: 340;
display: inline-block;
width: 4.16667%;
height: 6.66667%;
min-height: 60px;
font-family: 'rajdhani', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
color: #000;
font-size: 16px;
}
.scroll-indicator .border-grey {
position: absolute;
left: 0;
top: 0;
z-index: 100;
width: 2px;
height: 100%;
background: #333;
}
.scroll-indicator .border {
position: absolute;
left: 0;
top: 0;
z-index: 200;
width: 2px;
height: 100%;
background: #000;
}
.scroll-indicator em {
display: inline-block;
font-style: normal;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: center center;
transform-origin: center center;
position: absolute;
left: 0px;
top: 12px;
}
#media screen and (max-width: 800px) {
.scroll-indicator {
bottom: 0;
}
}
<a href="" class="scroll-indicator" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
<div class="border-grey"></div>
<div class="border" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0% 0% 0px;"></div>
<em>scroll</em>
</a>
You could make use of CSS3 animations and transitions to implement that behaviour.
To implement an animation it's usually good to understand what is happening before trying to code it. In this case we can describe it in 3 easy steps:
element starts in top: 0 with height: 0
element stay in top: 0 with height: 100%
element moves to top: 100% with height: 0
With that in mind we can just code our keyframe.
Following is a small example on how to do it:
body {
background: #555;
}
.scroll-indicator {
position: absolute;
bottom: 0;
width: 30px;
left: 50%;
height: 60px;
transition: height .25s linear;
cursor: pointer;
}
.scroll-indicator:hover {
height: 75px;
}
.scroll-indicator .border-grey {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: #333;
}
.scroll-indicator .border-white {
position: absolute;
top: 0;
left: 0;
width: 2px;
background: #fff;
animation-name: animation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.scroll-indicator span {
transform: rotate(-90deg);
position: absolute;
top: 10px;
color: #fff;
}
#keyframes animation {
0% {
height: 0;
}
33% {
top: 0;
height: 100%;
}
66% {
top: 100%;
height: 0;
}
100% {}
}
<div class="scroll-indicator">
<div class="border-grey"></div>
<div class="border-white"></div>
<span>scroll</span>
</div>
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 %.
I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.