I'm currently doing a school project, and I need to use Weebly to build a website.
Using Weebly's "embed code" section type, I put some code (that I stole off the internet) into the embed code area. The code is basically meant to show text whenever you hover your mouse over an image, however I'm having problems actually changing the font size. When I host it on my ide/browser, Font Size works fine, but when I host it on weebly, the font size is massive (and covers up the image. Does anyone know how to fix this?
Code here:
<!DOCTYPE html>
<html lang="en">
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
background-color: #000;
color: #fff;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 18;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1585 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1585:before,
.snip1585:after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 50px solid rgba(0, 0, 0, 0.5);
border-bottom: 50px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
}
.snip1585:before {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585:after {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1585 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.snip1585 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1585 h3 span {
display: block;
font-weight: 700;
}
.snip1585 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.snip1585:hover>img,
.snip1585.hover>img {
opacity: 0.7;
}
.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.snip1585:hover figcaption,
.snip1585.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
<figure class="snip1585">
<img src="http://www.applet-magic.com/unemploy.jpg" />
<figcaption>
<h3>"The first statistic for demonstrating the decline of the economy into depression is the unemployment rate"<span>Courtesy of "San Jose University"(Watkins, The Depression of the 1930's and Its Origins or Causes )</span></h3>
</figcaption>
</figure>
</html>
Related
I’m trying to make a menu open button for my website, but there’s one slight problem, when I try to assign it to move vertically, for example do margin-top: 100px it won’t move. But when I set a margin-left it changes position and moves horizontally! I have no idea as to why this is happening. I would love to get some advice on how to put the menu button a bit further downwards. I have a feeling it has something to do with the attribute being a span, but I have no idea. Any help is greatly appreciated.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
background-size: cover;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
font-size: 40px;
display: inline-block;
width: 160px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 0px;
padding-bottom: 5px;
}
.navMenu a:hover {
color: #fddb3a;
}
.navMenu .dot {
width: 6px;
height: 6px;
background: #fddb3a;
border-radius: 50%;
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot {
-webkit-transform: translateX(80px);
transform: translateX(80px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover~.dot {
-webkit-transform: translateX(240px);
transform: translateX(240px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover~.dot {
-webkit-transform: translateX(400px);
transform: translateX(400px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover~.dot {
-webkit-transform: translateX(570px);
transform: translateX(570px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
.overlay .closebtn {
position: absolute;
top: 20px;
margin-right: 20px;
right: 45px;
font-size: 120px;
}
.openNav {
font-size: 50px;
margin-left: 100px;
color: black;
}
#media screen and (max-width: 1305px) {
.dot {
display: none;
}
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<nav class="navMenu">
Home
Blog
Work
About
<div class="dot"></div>
</nav>
</div>
</div>
<span class="openNav" style="cursor: pointer;" onclick="openNav()">☰</span>
</body>
</html>
I have a feeling it has something to do with the attribute being a span
That is right, because the span is by default has display: inline, and if you change it to display: block and apply some margin-top: 100px you see it changes the position.
.openNav{
display: block;
margin-top: 100px;
}
I'm having trouble with a button. It's a text with a background color and some padding. Basically, when I refresh the page, the button takes a bit less than a second before getting to its dimension. It starts with 0 paddings and gets to the value I set after a few moments like it was animated, but it wasn't. I didn't set any animation for it to do it. I'll leave the code here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
padding: 30px;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.80)),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
margin-bottom: 60px;
}
.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation: moveInLeft 1s ease-out;
/*animation-delay: 3s;*/
/*animation-iteration-count: 3;*/
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 17.4px;
animation: moveInRight 1s ease-out;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
display: inline-block;
border-radius: 100px;
transition: transform, box-shadow, .2s;
position: relative;
animation: moveInBottom 1s ease-out;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: tansform, opacity, .4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
This thing happens in chrome but not in firefox. I'm following a course on a very well known website and, despite the guy does exactly the same code, it doesn't seem that he has the same problem.
Thank you guys, I really appreciate what you do every day, helping us solve our problems.
Happy new year, btw
Change transition it into
transition: transform .2s, box-shadow .2s; and transition: transform .4s, opacity .4s;
This is the way to use multiple properties in transition.
transition: transform, box-shadow, .2s; this will be equivalent to
transition-property: transform, box-shadow, all;
transition-duration: 0s, 0s, 0.2s;
I'm quite new to coding and I'm having trouble with the "hover".
It opens already on other parts of the website, but not on the specific location I want. Also it somehow stays opened after hovering and leaving the position. Does someone know why? :)
.pill1 {
position: absolute;
left: 300px;
top:10px;
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 15%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 100;
}
.container:hover .pill1 {
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: rgba(22, 32, 162, 0.44);
color: rgba(242, 0, 255, 0.55);
font-family: Akzidenz-Grotesk Pro, bold;
font-size: 20px;
padding: 16px 32px;
width: 300px;
}
<div class="container">
<img src="images/xanax0001.png" alt="Avatar" class="pill1" >
<div class="middle">
<div class="text">"....".</div>
</div>
I have a hover effect on div.overlay, so when hovered, it will fade out and back in. However, if I hover the <span> or <h2>, background does not change, and I'm struggling finding how to make anything hovered within the <a> to have the same effect. Any ideas?
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over"></div>
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</a>
</div>
contain the content within the overlay div
.homepage-box {
position: relative;
width: 300px;
height: 300px;
}
.homepage-box h2 {
margin-bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 14%;
color: #ffffff;
font-size: 2em;
z-index: 3;
}
.homepage-box span.button {
position: absolute;
left: 0;
right: 0;
top: 50%;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.3em;
border: 1px solid #fff;
padding: 7px 20px;
font-weight: bold;
margin: 0 30%;
z-index: 3;
}
.homepage-box img {
margin: 0 0 10px 0;
z-index: 1;
}
.homepage-box div.over {
position: absolute;
height: 191px;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2);
top: 0;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}
.homepage-box div.over:hover,
.homepage-box a:hover ~ div.over,
.homepage-box h2:hover ~ div.over {
background: rgba(0, 0, 0, 0);
}
.homepage-box a {
color: #2B2B2C;
margin: 0 0 15px 0;
display: block;
}
<div class="homepage-box">
<a href="#">
<div class="over">
<h2>Baby Bean Bags</h2>
<span class="button">shop now</span>
<img src="/images/companies/1/baby-beanbags.jpg">
<p>Perfect for a newborn baby & makes a lovely gift to new parents. Cute, safe & well designed baby beanbags.</p>
</div>
</a>
</div>
Ok, so I'm attempting to put multiple modal links on a single page, but when each one is clicked, the same modal opens up for all the links because they all use #target-content. I really like this specific modal, but is there a way not have the same modal open up based on the code below? Thank you!
HTML
Open A Modal
<div id="target-content">
<div id="target-inner">
<h2>Modal Heading</h2>
<p>Modal Content</p>
</div>
</div>
CSS
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 48px;
line-height: 1.8;
width: 70%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content #target-inner h2 { margin-top: 0; }
#target-content #target-inner code { font-weight: bold; }
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #34495E;
opacity: 0.5;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover { opacity: 0.4; }
Your only supposed to use the #id-name once.
Change the name of the id's #target-content, #target-content1 etc..,
You can use the same css styling with a .class-name but #id-names are supposed to be unique.