I am attemping to move title "data analyst" to be centered in this piece of code.. I'm not sure why it's not already as code is labeled center in the .front-person-titles > span piece of css. I am very new to css/html (just started working on this portfolio webpage a few days ago.) Where in these lines of css would I change the code so that data analayst text is centered?? In addition to this, when I run code snippet in stackoverflow, the image is formatted the same as the gray box from .front-person-img css code and NOT from the .front-person-img > img code. I am not sure how to make the image respond to the > img code so that its formatting is separate as seen in this jpeg.
Thank you!
.front-section {
padding-top: 60px;
padding-bottom: 200px;
position: relative;
}
}
.section-block>.container,
.section-block {
position: relative;
}
/*=======================================================================
Front Section
=======================================================================*/
body.section-show .transition-mask {
position: absolute;
top: 260px;
height: 500px;
width: 500px;
left: 0;
right: 0;
margin: auto;
z-index: 22;
transform: rotate(45deg);
overflow: hidden;
-webkit-animation: fill2 .8s .4s both ease;
-moz-animation: fill2 .8s .4s both ease;
animation: fill2 .8s .4s both ease;
}
body .transition-mask:before {
content: ' ';
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
body.section-show .transition-mask:before {
-webkit-animation: fill .4s both ease;
-moz-animation: fill .4s both ease;
animation: fill .4s both ease;
background: #CCC;
}
#-webkit-keyframes fill2 {
0% {
transform: rotate(45deg);
}
100% {
z-index: 50;
transform: rotate(0deg);
height: 100%;
width: 100%;
top: 0;
bottom: auto;
}
}
#keyframes fill2 {
0% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
100% {
z-index: 50;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
height: 100%;
width: 100%;
top: 0;
bottom: auto;
}
}
#-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.front-section {
padding-top: 60px;
padding-bottom: 200px;
position: relative;
}
.front-heading {
text-align: center;
margin-top: 190px;
}
.front-heading>h2 {
font-size: 55px;
font-weight: lighter;
letter-spacing: 15px;
position: relative;
position: relative;
line-height: 1em;
display: inline-block;
*display: inline;
*zoom: 1;
z-index: 10;
color: #999;
font-family: 'Playfair Display', serif;
font-style: italic;
}
.front-person-img {
width: 500px;
height: 500px;
overflow: hidden;
background: #F0F0F0;
position: relative;
z-index: 15;
-webkit-transition: height .5s .3s ease, transform .5s .8s ease;
-moz-transition: height .5s .3s ease, transform .5s .8s ease;
transition: height .5s .3s ease, transform .5s .8s ease;
margin: 200px auto;
margin-bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 0;
}
.front-person-img > img {
max-width: 100%;
left: -40px;
top: 40px;
position: relative;
vertical-align: bottom;
}
.front-person-titles {
position: relative;
z-index: 10;
height: 500px;
width: 500px;
margin: auto;
margin-top: -500px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.front-person-titles>span {
position: absolute;
z-index: 5;
display: block;
width: 100%;
font-family: Hind, sans-serif;
color: #CCC;
text-align: center;
font-size: 24px;
letter-spacing: 25px;
line-height: 2em;
text-transform: lowercase;
}
.front-person-titles>.t1 {
right: 0;
bottom: 0;
-webkit-transform: rotate(-90deg) translateY(-100%);
-moz-transform: rotate(-90deg) translateY(-100%);
-ms-transform: rotate(-90deg) translateY(-100%);
-o-transform: rotate(-90deg) translateY(-100%);
transform: rotate(-90deg) translateY(-100%);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.front-person-titles>.t2 {
top: 0px;
left: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.front-person-titles>.t3 {
left: 0;
bottom: 5px;
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg);
}
.front-person-links {
margin: auto;
width: 500px;
height: 500px;
margin-top: -500px;
z-index: 25;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
}
.front-person-links>ul>li {
display: block;
}
.front-person-links>ul {
font-size: 0;
z-index: 99;
position: absolute;
text-align: left;
white-space: nowrap;
left: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
padding: 0;
list-style: none;
margin-left: -15px;
}
.front-person-links>ul>li>a {
font-weight: bold;
display: block;
font-size: 14px;
padding: 25px 0;
cursor: pointer;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
position: relative;
color: #999;
text-align: left;
text-transform: uppercase;
letter-spacing: 3px;
text-decoration: none;
line-height: 1em;
}
.front-person-links>ul>li>a:before,
.front-person-links>ul>li>a:after {
content: ' ';
height: 6px;
width: 15px;
background: #CCC;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
margin-right: 15px;
font-size: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
display: none;
}
.front-person-links>ul>li>a:after {
margin-left: 15px;
margin-right: 0;
display: none;
}
.front-person-links>ul>li>a:hover {
color: #B7A389;
}
.front-person-links>ul>li>a:hover:after,
.front-person-links>ul>li>a:hover:before {
width: 25px;
background: #999;
}
<!--=============================================================================
Front Section
===============================================================================-->
<section class='front-section'>
<div class='container'>
<div class='transition-mask'></div>
<div class='front-person-img'>
<!--person's image-->
<img src="https://i.ibb.co/qY05xXH/IMG-5876.jpg" alt="IMG-5876" border="0">
<!--/person's image-->
</div>
<!--person's titles-->
<div class='front-person-titles'>
<!--title1-->
<span class='t1'>
Data Analyst
</span>
<!--/title1-->
<!--title2-->
<span class='t2'>
Student
</span>
<!--/title2-->
<!--title3-->
<span class='t3'>
</span>
<!--/title3-->
</div>
I was able to get it looking how you want by modifying the .front-person-titles>.t1 code to the following:
.front-person-titles>.t1 {
right: 0;
bottom: 0;
-webkit-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-moz-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-ms-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-o-transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
transform: rotate(-90deg) translateY(-100%) translateX(-7.5%);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
You can see a working JSFiddle here.
I have an image which on hover displays the title of a video. I want to be able to click after hovering and have my iframe show up. I have been able to simply put the vimeo player in to pop up, but whenever I want to put the iframe in, it doesn't work. I understand I can't wrap it inside the tag but I don't know another solution. Right now if you input the code, on hover the iframe appears. I want for it to not appear on hover, but appear when I click. Any help would be appreciated.
CODE:
<style>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
</style>
<main>
<a class="align" href="test">
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
Remove the source attribute of your IFrame and only set it onClick
Give your IFrame a unique identifier so you can find it with document.getElementById().
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
The IFrame should then have a source. You can set the source for example like this:
document.getElementById("myIframe").src = "https://yoursource.com"
Now add this code inside the onClick attribute to your element you want the user to click on.
onClick='document.getElementById("myIframe").src="https://yoursource.com"
So your full HTML could look like this:
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
<p onClick="document.getElementById("myIframe").src="https://yoursource.com"">Click here</p>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
#myIframe {}
<main>
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<a href="#">
<div onClick='document.getElementById("myIframe").src="https://player.vimeo.com/video/389137312"' class="hvrbox-layer_top"></div>
</a>
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
<iframe id="myIframe" onClick="https://player.vimeo.com/video/389137312" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</main>
When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
I have an animation for a div that looks like a heart and am trying to put some text next to the heart div when the animation finishes. I tried putting text in a div and positioning that next to the heart but the invisible part of the heart keeps pushing it around or sometimes the div with text isn't visible at all. some help would be appreciated. Here is the code:
body {
overflow: ;
}
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
z-index: 2;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
50% {
left: 0;
z-index: 2;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
z-index: 2;
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<body>
<div id="heart"></div>
<div id="lol">#Forever Alone</div>
You possibly missed the { after . That is,
100%{
z-index:2;
}
#lol {
should be
100% {
z-index: 2;
}
}
#lol {
Hope it helps!
The weird formatting is because you just need to add another closing bracket after you're done declaring your #keyframes (just before #lol).
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
z-index: 2;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
50% {
left: 0;
z-index: 2;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
z-index: 2;
}
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}
I'm trying to create a circular menu with 6 radials using html and css. I only get 5 of the 6 total radials (borders). I need get the last radial, between item5 and item6. I need get the same of the picture:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
overflow: hidden;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I figured out a simple problem to get your line break in, albeit it is a little odd.
All I did was add an additional item without any content and then rotated it, gave it a background and transformed it into place.
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width: 1px;
height: 70px;
left: 68px;
top: 81px;
jsFiddle demo
The reason why you didn't have a white border there is because your item6 was rotated so it lined up with your item1, instead of it being rotated so it created the border between item5 and item6.
I tried rotating item6 so it created the border between itself and 5, but it caused it to overlap with item1, which just caused a never ending z-index loop in order to solve it