I've created a website and when viewing it on an iPad or iPhone (example), it doesn't resize to fit the screen. It puts my text box (with name and social media buttons) to the left and my background image to the right (with whitespace in between these two elements). I'd like the site to work when viewed in portrait and landscape, as well as on desktop browsers (resizing with browser window)
How do I implement this into my code?
HTML:
<head>
<meta charset="UTF-8">
<title>My site!</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="background">
<div class="foreground">
<div class="name-tag">MY SITE!
</div>
<ul class="social-media-list">
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/twitter-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png">
</li>
<li class="social-media-link">
<img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png">
</li>
</ul>
</div>
</section>
</body>
</html>
CSS:
/* Body Margin*/
body {
margin: 0;
}
/* Font family avenir-light*/
#font-face {
font-family: 'avenir-light';
src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}
/* Background Div*/
.background {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
/* Background Div: after*/
.background:after {
position: absolute;
width: 100vw;
height: 100vh;
content: '';
background-image: url("bkgd.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: fadein 3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s;
/* Firefox < 16 */
-ms-animation: fadein 3s;
/* Internet Explorer */
-o-animation: fadein 3s;
/* Opera < 12.1 */
animation: fadein 3s;
/*Fade In Animation*/
}
/* Fade in animations */
#keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
opacity: 0.2;
}
to {
opacity: 1;
}
/* Foreground div */
.foreground {
margin-top: 20px;
position: relative;
width: 400px;
height: 100px;
background-color: #eaeaea;
padding: 20px;
border: 1px solid #555;
border-radius: 10px;
/*Fade In Animation*/
-webkit-animation: fadein 5s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s;
/* Firefox < 16 */
-ms-animation: fadein 5s;
/* Internet Explorer */
-o-animation: fadein 5s;
/* Opera < 12.1 */
animation: fadein 5s;
z-index: 1;
}
/* Name Tag */
.name-tag {
font-family: 'avenir-light';
text-align: center;
font-size: 24px;
}
/* Social Media List*/
.social-media-list {
list-style: none;
display: flex;
justify-content: space-around;
padding: 0;
}
/* Social Media Item*/
.social-media-link img {
height: 50px;
width: 50px;
transition:all 0.5s ease;
}
.social-media-link img:hover {
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari */
transform: scale(1.2);
/* Standard syntax */
}
You can use Bootstrap for this purpose. Bootstrap divides the screen into 12 columns. for different screen size different classes are there like for medium size you can use col-md-3 or for small size devices col-sm-3 and so on.
Related
I don't know how to implement code for pulsating text with delay. I have a background image and over it, I have 2 different texts that appear at different times. 1st text is ok, but with the second one, I have a problem where I don't know how to make it pulsate with delayed appearance.
Code:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
}/* This was missing*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<a href="skills.php">
<div class="bg tekst_slika">
<div id="test" class="centered">WELLCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
</a>
</body>
</html>
Thank you all for your help in advance.
Here is a Fiddle that I think gives you the solution your after: https://jsfiddle.net/v1pm2y8f/3/
You had several syntax errors that needed to be fixed but the main differences where setting the opacity to 0 on startup and the use of animation-fill-mode: forwards;
to preserve the animation values once fadein had completed.
HTML
<div class="bg tekst_slika">
<div id="test" class="centered">WELCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#test,
#test2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-fill-mode: forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 4 years ago.
I have finally made my background image fade in when my webpage loads, and now I want the animation to be a little delayed so you are able to se the background color for a moment.
I have tried to use the "animation-delay: 2s;" thing in css, but when the page loads, the image is already shown and the animation just starts after 2 seconds. This means that the image is shown, then disappears and then do the animation. I then tried to set the image to "opacity: 0;", but then problem just turns around. So now the image isn't shown to begin with, then the animation tuns, but after that the image disappears again
html:
<div class="imageThing">
</div>
css:
/* attempt 1 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* attempt 2 */
.imageThing {
background: #fff url('image') 0px 0px no-repeat ;
opacity: 0;
background-size: 100vw 30.15vw;
-webkit-animation: fadein 3s; /* Safari and Chrome */
-moz-animation: fadein 3s; /* Firefox */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera */
animation: fadein 3s;
animation-delay: 2s;
height: 30.15vw;
width: 100vw;
position: absolute; top: 0px; left: 0px;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
I need the image to be invisible until a number of seconds after the page loads until the animation begins, and then stay visible. I hobe you can help me :)
You can add animation-fill-mode: both to hold the animation before and after.
.imageThing {
animation-fill-mode: both;
}
Building a quick website. Ideally, I want it to look similar to this:
http://imgur.com/a/NVVEv
Where, the hawaii background image is faded in at the start (and stays faded with an opacity of 0.2) & the rectangle in the middle fades in with the title and buttons but displays fully after the background image.
They'd be two seperate images (background #1 and rectangle #2) - how would I'd be best to do this with HTML/CSS? I have the background image working but the rectangle doesn't fade in and show. I'd like to have the buttons also link to pages (unsure how to do this)
Also having trouble finding the best way to resize my page to fit with the browser? I know it's alt tags but I can't remember the exact code needed.
I'm a noob and having trouble finding sufficient code to fulfil my request.
Cheers
CODE BELOW:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src = "bkgd.jpg" alt=""/>
<img src="backdrop.png" width="1920" height="1080" alt=""/>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
html, body {
height: 100%;
margin: 0;
padding: 0;
background-size: auto;
}
img {
opacity: 0.5;
background-repeat: no-repeat;
background-position: center;
margin-right: auto;
margin-left: auto;
background-attachment: fixed;
/*Fade In Animation*/
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.5; }
}
}
Try this. I have added sample images. The first image is set as body background and the fading image is set as a div background.
To place the fading image in the middle of the page, use
display: flex;
justify-content: center;
align-items: center;
To make the background image fit to screen width, use
width: 100vw;
height: 100vh;
/* Body Margin*/
body {
margin: 0;
}
/* Background Div*/
.background {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
/* Background Div: after*/
.background:after {
position: absolute;
width: 100vw;
height: 100vh;
content: '';
background-image: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
-webkit-animation: fadein 10s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 10s;
/* Firefox < 16 */
-ms-animation: fadein 10s;
/* Internet Explorer */
-o-animation: fadein 10s;
/* Opera < 12.1 */
animation: fadein 10s;
/*Fade In Animation*/
}
/* Fade in animations */
#keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
opacity: 0.2;
}
to {
opacity: 1;
}
/* Foregraound div */
.foreground {
margin-top: 20px;
position: relative;
width: 400px;
height: 100px;
background-color: #eaeaea;
padding: 20px;
border: 1px solid #555;
border-radius: 10px;
/*Fade In Animation*/
-webkit-animation: fadein 10s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 10s;
/* Firefox < 16 */
-ms-animation: fadein 10s;
/* Internet Explorer */
-o-animation: fadein 10s;
/* Opera < 12.1 */
animation: fadein 10s;
z-index: 1;
}
/* Name Tag */
.name-tag {
font-family: 'avenir-light';
text-align: center;
font-size: 24px;
text-transform: uppercase;
}
/* Socail Media List*/
.social-media-list {
list-style: none;
display: flex;
justify-content: space-around;
padding: 0;
}
/* Socail Media Item*/
.social-media-link img {
height: 50px;
width: 50px;
transition: all 0.5s ease;
}
.social-media-link img:hover {
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari */
transform: scale(1.2);
/* Standard syntax */
}
<section class="background">
<div class="foreground">
<div class="name-tag">lorem ipsum
</div>
<ul class="social-media-list">
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png">
</li>
<li class="social-media-link">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png">
</li>
<li class="social-media-link">
<img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png">
</li>
</ul>
</div>
</section>
I'm learning CSS and I want to make that on a hover on some text, the text disappears and there is a fade-in on an image. I've tested some things but it doesn't work the way I want to do it.
The text is a link in a and on the hover I set the background image. I could use an in the but I want the text to be in the middle of the and it's already in a with an absolute position.
Here's the HTML :
<div class="header">
<!--<ul>-->
<div class="header_element">
<a title="Home" href="page.php"> Home </a>
</div>
And the CSS :
div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}
div.header_element:hover {
background-position: center;
background-image: url("hover.png");
background-repeat: no-repeat;
}
Would appreciate if anyone could help me with this.
You would like to probably use opacity and fade-in effect.
div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}
div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
See the jsfidle if it's what you wanted.
Not sure if you can do it exactly the way you want. To "fade in" you normally animate the opacity of a layer, but that applies to the whole layer not just the background image. But why don't you move the Image to another layer, like this:
<div class="header_element">
<div class="header_background"></div>
<a title="Home" href="page.php"> Home </a>
</div>
Also it might be better to load the image before the user hovers, bc then you will have a visible delay until the image is actually loaded.
The CSS might look like this (not tested though):
.header_background {
transition: opacity 1s;
background-position: center;
background-image: url("hover.png");
background-repeat: no-repeat;
opacity: 0;
}
.header_element:hover > .header_background {
opacity: 1;
}
Try adding the following css to see if it works for you:
.header_element{
background: red;
display: inline-block;
}
.header_element > a{
display: inline-block;
padding: 5px 10px;
}
.header_element:hover > a{
opacity: 0;
}
.header_element:hover{
background: url(http://dummyimage.com/60x28/000/fff);
}
you can see the test here: jsfiddle
I have added text-indent property to your existing CSS. So when you hover the link the text will go off-screen(hide) and you will see only image.
.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}
.header_element a:hover{
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
display:block;
text-indent: -9999px;
}
http://jsbin.com/kexadaqaxu/3/edit
The fadeout animation is not working. I think you can't put two Ids on one div.
How do you get the fadeout to work?
here is the jsFiddle
html
appear
<div id="pop" id="pop_close">
disappear
</div>
CSS
body {
padding: 10em;
}
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
}
#pop:target {
opacity: 1;
z-index: 1;
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
#pop_close:target {
opacity: 0;
z-index: -1;
-webkit-animation: fadeOut 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeOut 1s; /* Firefox < 16 */
-ms-animation: fadeOut 1s; /* Internet Explorer */
-o-animation: fadeOut 1s; /* Opera < 12.1 */
animation: fadeOut 1s;
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Firefox < 16 */
#-moz-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Internet Explorer */
#-ms-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
here is a working fiddle http://jsfiddle.net/oogley_boogley/wqju9jh6/19/
the css:
#pop{
height: 10em;
width: 10em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s; /* key style here, look into -webkit and -moz etc as well */
}
Exactly, you cannot have multiple ID on the same page,
therefore you need to modify the ID to make :target a specific popup:
div[id^=popUp] // means: target DIV element who's ID "starts with".
than in the HTML you simply make the ID unique by adding a number.
div[id^=popUp]{
height: 5em;
width: 5em;
background: yellow;
opacity:0;
position: relative;
top: -20px;
z-index: -1;
transition: opacity 1s;
}
div[id^=popUp]:target {
opacity: 1;
z-index: 1;
}
appear
<div id="popUp1">
disappear
</div>
appear
<div id="popUp2">
disappear
</div>