Can someone help me figure out how to add my upload image code and text input to the page 1 right below the Header and paragraph. When I add it, it stays stuck at the top of the page. I have the code below and an image of the issue. We are supposed to add on different pieces to this web page design for an assignment and I'm new to html so I'm struggling with how to fix this issue.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>The Title</title>
<meta name="viewport" content="width=device-width">
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
Page 1
<input type="radio" name="radio-set" id="st-control-2"/>
Page 2
<input type="radio" name="radio-set" id="st-control-3"/>
Page 3
<input type="radio" name="radio-set" id="st-control-4"/>
Page 4
<input type="radio" name="radio-set" id="st-control-5"/>
Page 5
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon=""></div>
<h2>P1</h2>
<p>here is the paragraph.</p>
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
Let's get started!
</center>
</div>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-deco" data-icon=""></div>
<h2>P2</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-deco" data-icon=""></div>
<h2>P3</h2>
<p>Sint aute occaecat id vice. Post-ironic pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-deco" data-icon=""></div>
<h2>P4</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon=""></div>
<h2>P5</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
CSS
#import url('//fonts.googleapis.com/css?family=Josefin+Slab:400,700');
body {
overflow: hidden;
}
/* Main container where upload img and text input is */
.main_container{
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
a {
text-decoration: none;
}
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
/* Content elements */
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontAwesome';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-moz-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveDown{
0% {
-ms-transform: translateY(-40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveUp{
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveUp{
0% {
-moz-transform: translateY(40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveUp{
0% {
-o-transform: translateY(40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveUp{
0% {
-ms-transform: translateY(40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
#media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
#media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
[data-icon]:after {
font-size: 60px;
-webkit-transform: rotate(-45deg) translateY(15%);
-moz-transform: rotate(-45deg) translateY(15%);
-o-transform: rotate(-45deg) translateY(15%);
-ms-transform: rotate(-45deg) translateY(15%);
transform: rotate(-45deg) translateY(15%);
}
}
Take a look to your HTML, and I've just put your input under new div and added margin to him:
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
And at all it looks like this:
<p>here is the paragraph.</p>
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
Let's get started!
</div></div>
Answers above are great. A hint to figuring out these things is right click on the element and select "Inspect" then you can see all the values affecting layout and where in the css they are getting set.
it is understandable when you are new, things such as this may be hard to notice. I may be wrong, however, it is because of something called specificity that your code is not behaving the way it is supposed to.
Your "main_container" class is being affected by its parent div element with the class of "st-container" to which you have positioned in the top left corner. If you were to use the css selector for "main_container" and change its position, its specificity would override the "st-container".
Related
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>
Here are some issues which I can't seem to figure out.
When you hover on the image I am animating a few styles but as you will see, when the border size increases, everything else moves with it.
When you change the sidetext to something longer or shorter, it decides to move positions.
Please can someone explain what I am doing wrong?
/*
Colors:
#FF0F00 = red
#FFFF04 = yellow
#387F23 = green
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
}
.animate {
animation-fill-mode: forwards;
animation-duration: 1s;
}
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/* FADE IN RIGHT */
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hero__img img {
max-width: 100%;
vertical-align: middle;
}
.hero__center:after {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
/* z-index: -1; */
opacity: 0;
transition: opacity 0.4s ease-in;
}
#media (min-width: 920px) {
.hero {
margin: 0 auto;
width: 700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.hero__heading {
position: absolute;
font-size: 80px;
color: #0004f3;
text-transform: uppercase;
font-weight: bold;
font-kerning: -3px;
letter-spacing: 4px;
z-index: 1;
}
.hero__heading--top {
left: -85px;
top: -150px;
opacity: 1;
}
.hero__heading--bottom {
right: -85px;
bottom: -150px;
opacity: 1;
}
.hero__center {
position: relative;
border: 5px solid blue;
transition: border 0.4s ease-in;
}
.hero__center:hover {
border: 10px solid #387F23;
transition: border 0.4s ease-in;
}
.hero__center:hover:after {
opacity: 0.4;
transition: opacity 0.4s ease-in;
}
.hero__center:hover .hero__sideText {
color: red;
transition: color 0.4s ease-in;
}
.hero__img img {
opacity: 1;
transition: opacity 0.4s ease-in;
}
/* .hero__img:hover img {
opacity: 0.4;
transition: opacity 0.4s ease-in;
} */
/* .hero__center:hover {
border: 5px solid green;
transition: border 0.5s;
} */
.hero__sideText {
position: absolute;
top: 50%;
color: #0004f3;
transition: color 0.4s ease-in;
}
.hero__side--left {
left: -50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: center center;
}
.hero__side--right {
right: -50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: center center;
}
}
<div class="container">
<div class="hero animate fadeIn one">
<div class="hero__center">
<span class="hero__heading hero__heading--top animate fadeInLeft one">Lorem</span>
<span class="hero__heading hero__heading--bottom animate fadeInRight one">Ipsum</span>
<div class="hero__img">
<img src="http://via.placeholder.com/980x550" alt="">
</div>
<span class="hero__sideText hero__side--left">Side text</span>
<span class="hero__sideText hero__side--right">Side text</span>
</div>
</div>
</div>
Since the size of your box changes by changing the border width, the elements change their position aswell.
try adding :
.hero__center:hover {
margin:-5px;
}
to work against the border change.
2.
The transform rotation uses the center point of your element as its origin (transform-origin: center center;). When increasing the characters you increase the width so the point which the rotation choses as its origin shifts aswell.
To change that you have to fix that point to a specific location. Try adding a div wrappers around your sideText spans with the following css:
.wrapper-left {
position:relative;
left: -50%;
}
.wrapper-right {
position:relative;
left: 50%;
}
I have the following HTML:
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);
/* global css */
body {
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
padding: 0;
margin: 0;
}
.col-md-4 {
width: 33.33%;
float: left;
}
.info-boxes {
display: block;
position: relative;
background: #7accc8;
padding: 2em 0;
overflow: hidden;
text-align: center;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.info-boxes h5 {
font-size: 30px;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.info-boxes p {
margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.info-boxes span {
display: inline-block;
font-weight: 700;
position: relative;
/* position: absolute;
bottom: 0;
left: 0;
right: 0;
*/
/*left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);*/
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.info-boxes:hover {
background: #f5989d;
}
.info-boxes:hover span {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
width: 100%;
height: 1px;
background: #fff;
/*-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);*/
-webkit-transition: all .3s ease .2s;
-o-transition: all .3s ease .2s;
transition: all .3s ease .2s;
opacity: 0
}
.info-boxes span:after {
right: initial;
left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
left: calc(100% + 10px);
opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
right: calc(100% + 10px);
opacity: 1;
}
<a class="info-boxes">
<h5>2200AED</h5>
<p>5 Private Sessions / Validity: 2 Months</p>
<span>Online Booking</span>
</a>
Now why is the a not a anchor any more I.E. i can't click on the <a> anymore, why?
Now the one solution that I found to this was that change the container to a div tag and inside have an a and apply the following styles to it:
.info-boxes a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 99;
}
But this is a "Why" question not a "How to solve this" question.
So what I'd like to ask is why is the <a> tag not acting like one , in this given example?
you need to add the href otherwise the a won't be clickable
if you are NOT using the href then it is considered only a placeholder hyperlink, see more here on W3C
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);
/* global css */
body {
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
padding: 0;
margin: 0;
}
.col-md-4 {
width: 33.33%;
float: left;
}
.info-boxes {
display: block;
position: relative;
background: #7accc8;
padding: 2em 0;
overflow: hidden;
text-align: center;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.info-boxes h5 {
font-size: 30px;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.info-boxes p {
margin: 0.5em 0;
}
.info-boxes h5,
.info-boxes p {
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
}
.info-boxes:hover h5,
.info-boxes:hover p {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.info-boxes span {
display: inline-block;
font-weight: 700;
position: relative;
/* position: absolute;
bottom: 0;
left: 0;
right: 0;
*/
/*left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);*/
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.info-boxes:hover {
background: #f5989d;
}
.info-boxes:hover span {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.info-boxes span:before,
.info-boxes span:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
width: 100%;
height: 1px;
background: #fff;
/*-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);*/
-webkit-transition: all .3s ease .2s;
-o-transition: all .3s ease .2s;
transition: all .3s ease .2s;
opacity: 0
}
.info-boxes span:after {
right: initial;
left: 50%;
}
.info-boxes:hover span:after,
.info-boxes:focus span:after,
.info-boxes:active span:after {
left: calc(100% + 10px);
opacity: 1;
}
.info-boxes:hover span:before,
.info-boxes:focus span:before,
.info-boxes:active span:before {
right: calc(100% + 10px);
opacity: 1;
}
<a href="#" class="info-boxes">
<h5>2200AED</h5>
<p>5 Private Sessions / Validity: 2 Months</p>
<span>Online Booking</span>
</a>
A possible answer, as you don't specify if you want to go to another page or only to do something when clicking.
You should use a button tag instead. Why? Well, you should use an anchor link <a> if it goes to a page by specifing href property. If it is clickable, it has to do something BUT doesn't go to another page you should be using a button tag instead.
It may be a thing that the a doesn't have a href. I don't know if that's in the original code as well, but it seems to solve the problem.
When I add your code, which apparently solves it, it doesn't work for me, so I think you added a href when you changed the HTML.
In the project that I'm doing, I have multiple divisions one below another and I load them one after other depending on the navbar choice. Now that works fine if I don't have any fancy elements in the <div>. But when I added a form to a div it started floating on the div above it. This happens when I select any element in form. Also, I can't seem to be able to select any item that's there in the dropDown list that's there in the <form>.
Here is sample code of the list of divisions
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
Serendipity
<input type="radio" name="radio-set" id="st-control-2"/>
Happiness
<input type="radio" name="radio-set" id="st-control-3"/>
Tranquillity
<input type="radio" name="radio-set" id="st-control-4"/>
Positivity
<input type="radio" name="radio-set" id="st-control-5"/>
Passion
<div class="st-scroll">
<div class="st-panel" id="st-panel-1">
<h2>Serendipity</h2>
<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
</div >
<!--problematic div starts-->
<div id="RepresentativeRegistrationPage" class="st-panel st-color">
<form action="#" method="post" id="registration-form" novalidate="novalidate">
College:
<select class="required" id="college_id" name="college_id">
<option selected="selected" value="">Select College</option>
<option value="4">St. Xaviers College</option>
<option value="5">DMC College</option>
</select><span class="error_msg"></span><br>
First Name: <input type="text" value="" class="required" name="first_name" id="first_name"><span class="error_msg"></span><br>
Last Name: <input type="text" value="" class="required" name="last_name" id="last_name"><span class="error_msg"></span><br>
Username: <input type="text" class="required" name="username" id="username"><span class="error_msg"></span><br>
Password: <input type="password" class="required" name="password" id="password"><span class="error_msg"></span><br>
Confirm Password: <input type="password" class="required" name="confirm_password" id="confirm_password"><span class="error_msg"></span><br>
Mobile Number: <input type="text" value="" class="required" name="mobile_number" id="mobile_number"><span class="error_msg"></span><br>
Email address: <input type="text" value="" class="required" name="email" id="email"><span class="error_msg"></span><br>
<input type="submit" value="Register" name="submit">
</form>
</div>
<!--problematic div ends -->
<div class="st-panel" id="st-panel-3">
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</div>
<div class="st-panel st-color" id="st-panel-4">
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</div>
<div class="st-panel" id="st-panel-5">
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</div>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
And here is the CSS
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
/* Content elements */
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
content: attr(data-icon);
font-family: 'RaphaelIcons';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-moz-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveDown{
0% {
-ms-transform: translateY(-40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveUp{
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveUp{
0% {
-moz-transform: translateY(40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveUp{
0% {
-o-transform: translateY(40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveUp{
0% {
-ms-transform: translateY(40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
#media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
#media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
}
body{
font-family: Georgia, serif;
background: #ddd;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
a{
color: #555;
text-decoration: none;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
This problem only happens in Firefox ( I'm using Firefox 16.0).
Here is a JSFiddle of the problem. Click on the "Happiness" option in navbar to get to the problematic section.
Can someone please help me sort out the issue?
It seems like the css magic confuses Firefox in terms of "tabbing". This is a very interesting issue because it seems like Firefox tries to locate the tag and automatically align the viewport to make at the top, though it already is... CSS wise, I can do nothing to help, as even with overflow:hidden, you can still use the middle mouse button to scroll the body and thus cause the out-of-alignment issue present in Firefox. With google chrome, pressing tab on the "Serendipity" tab multiple times will cause the viewport to scroll to the input tab directly. See Avoid unwanted scrolling triggered by keyboard navigation in IE?
However, with javascript, this can all be easily avoided, if you're willing to sacrifice the "no javascript" aspect of your site.
var tabs = document.getElementById("registration-form").elements;
for (var i = 0; i < tabs.length; i++) {
tabs[i].setAttribute("tabindex", i + 1);
tabs[i].addEventListener('keydown', function(e) {
var e = window.event || e;
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var x = window.scrollX,
y = window.scrollY;
var elementToFocus = document.getElementById("registration-form").elements[this.getAttribute("tabindex")];
if (typeof elementToFocus == "undefined") {
elementToFocus = document.getElementById("registration-form").elements[0];
}
elementToFocus.focus();
window.scrollTo(x, y);
}
});
}
window.addEventListener("scroll", function(e) {
var e = window.event || e;
e.preventDefault();
window.scrollTo(0, 0);
});
http://jsfiddle.net/DGFat/15/
if you want to start a new div, then use clear attribute to prevent inheritance from the previous div. Something like this:
<div your style here></div>
<div Style="clear:both"></div>
<div You second div></div>
I think the problem is your use of input for "everything".
Adding: [type="checkbox"] to your CSS at this declaration:
.st-container > input, .st-container > a { ... } becoming
.st-container > input[type="checkbox"], .st-container > a { ... }
Stops the tabbing issue in FF, but it breaks the positioning a little, and throws off the navigation. Sounds worse than it is.
All browsers have built-in properties for input elements. I think your CSS implementation just doesn't do a good enough job at isolating your functionality from presentation.
Are you trying to put that form on center? Check this out:
Add this to your css (jsFiddle here: http://jsfiddle.net/DGFat/8/)
form {
height:200px;
position: absolute;
left: 50%;
width:300px;
top: 50%;
margin: -100px 0 0 -150px;
background: gray; /*just so you could see it better */
}