I'm trying to get an image to fill a specific section on the web page I'm making but I cannot find anything that works online.
.bigslide {
display: block;
position: relative;
width: 100%;
/*background: rgb(231, 231, 231);*/
padding: 160px 0;
color: #0ed1fb;
animation: slideleft 2000s infinite linear;
-webkit-animation: slideleft infinite linear;
}
.bigslide h1 {
font-size: 34px;
font-weight: bold;
margin-bottom: 20px;
}
.bigslide p {
font-size: 20px;
}
<section id="bigslide">
<div class="bigslide">
<div class="container">
<h1 class="slideup">Tigercraft01's High Quality Setups</h1>
<p>Scroll down to read about me and what I do.</p>
</div>
</div>
</section>
I need the image to show behind the text that loads with the snippet provided.
I'm not sure why it isn't in your CSS since you're trying to add an image but if you want to add a background image to your section, just use :
.bigslide {
background-image: url('http://lorempixel.com/g/500/500/');
background-repeat: no-repeat;
background-size: cover;
}
Related
This question already has answers here:
Change background image opacity
(9 answers)
Closed 1 year ago.
Suppose that I have a div element and I would like the opacity of the background color element (not the text) to be gradually increased in a given amount of time (not immediate change), where the initial opacity is 0, and the ending opacity to be either 1 or a smaller decimal like 0.7.
For instance, I would like the background-color of a div to be from rgba(90, 129, 229, 0) to rgba(90, 129, 229, 3) in 3 seconds.
I tried making a the opacity value #keyframes, but I would like it to target only the background color.
I would like a solution in vanilla HTML and CSS.
Thanks. Please let me know if the explanation of the question is too simple and more information is needed.
I did an example in codepen below there is the code https://codepen.io/Eros-C/pen/NWjzGOB
HTML
<div class="form"></div>
CSS
.form{
width:100px;
height:100px;
animation: animatedColor 3s linear;
}
#keyframes animatedColor{
0%{
background-color: rgba(90, 129, 229, 0);
}
100%{
background-color:rgba(90, 129, 229, 3);
}
}
If the background is a color you can simply do:
.background {
background-color: black;
animation:fade 3s forwards;
}
#keyframes fade {
to {
background-color: white;
}
}
<div class="background">
Hello World!
</div>
If the background is an image, you'll have to position a layer on top of the background image that uses rgba() to change the opacity:
.background{
background:url(https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=24&d=identicon&r=PG&f=1);
}
.layer{
height:100%;
width:100%;
background-color:rgba(255, 255,255,0);
animation:fade 3s forwards;
}
#keyframes fade{
to{
background-color:rgba(255, 255,255,1);
{
}
<div class="background">
<div class="layer">
Hello World!
</div>
</div>
Transition might be all you need:
document.querySelector('#toggle').addEventListener('click', () => {
document.querySelector('#fade-box').classList.toggle('faded');
});
/* The relevant CSS: */
#fade-box {
background-color: rgba(255,0,0,0);
transition: background-color 3s ease;
}
#fade-box.faded {
background-color: rgba(255,0,0,0.7);
}
/* Throwaway styles for working example: */
body {
background: #655b54 url(https://mars.nasa.gov/imgs/mars2020/jezero-overview.jpg) center center / cover no-repeat;
}
#fade-box {
font: bold 20px Arial, sans-serif;
width: 120px;
height: 120px;
border: 2px solid white;
padding: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
<div id="fade-box">My background fades</div>
<button id="toggle">Click Me to Fade!</button>
I am trying to make a simple navbar with some clickable links inside. However, right now I can't actually click the contents of the Navbar. I have a feeling the Navbar is "blocking" the accessibility of the links inside, but long story short I want to actually be able to click the links. I've attached snippets of my html and scss below. Where did I go wrong?
<nav class="cool-navbar">
<div class="left-buttons">
<a class="cool-link">Sammy Al Hashemi</a>
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
<a class="cool-link">Projects</a>
<a class="cool-link">Contact</a>
</div>
</nav>
.cool-navbar {
display: flex;
flex-direction: row;
width: 100vw;
height: $navbar-height;
background: inherit;
.left-buttons {
width: auto;
}
.middle-spacer {
flex-grow: 1;
}
.right-buttons {
width: auto;
}
.left-buttons .cool-link,
.right-buttons .cool-link {
display: inline-block;
text-align: center;
cursor: pointer;
padding: 15px 35px 12px 35px;
background: inherit;
font-family: $font-stack;
text-align: center;
font-size: $secondary-font-size;
color: $secondary-color;
animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
-webkit-animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
}
}
.cool-navbar::before {
content: '';
position: absolute;
border-bottom: $secondary-color solid 1px;
width: 100%;
height: $navbar-height;
animation: cool-border-animation 1s ease-in-out 0s 1 both;
-webkit-animation: cool-border-animation 1s ease-in-out 0s 1 both;
}
The problem is the <a> tag links haven't been given a hypertext reference. It can be set with the href attribute like so: <a href="link goes here"> You can set the reference to '#' as a placeholder until you have a link to place:
<nav class="cool-navbar">
<div class="left-buttons">
Sammy Al Hashemi
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
Projects
Contact
</div>
</nav>
Hope this helps
Figured it out! It was because the ::before pseudoelement was hovering over the link, blocking it being clicked. I instead set its top: $navbar-height and removed its height. This stopped causing it to block.
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
I am currently working on my portfolio site. I am using a Javascript to animate the header when scrolling (this is the tutorial I have followed).
It basically displays a larger header and logo when you scroll all the way to the top of the page. When you scroll down below 300 pixels it will reduce the height of the header in a graceful manner using CSS transitions. The larger logo will be swapped with a smaller version of the logo (as seen below). The tutorial was not intended for images but I made some small alterations to make it work.
.logo {
display: block;
float: left;
width: 180px; height: 60px;
margin-top: 29px;
background: url(../images/logo-large.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
}
.logo-shrink {
display: block;
float: left;
width: 90px; height: 30px;
margin-top: 14px;
background: url(../images/logo-small.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
}
I am wondering if there is any way that I can apply CSS transforms and transitions to make the swap less jarring? Would it be possible to maybe use a single image and scale it up or down? I apologise if this is a silly question, I am quite new to this :) Please let me know if you need me to provide more details.
Any help would be greatly appreciated :)
Instead of swapping the class, just add and remove class .logo-shrink. Add CSS transitions in class .logo...
.logo {
display: block;
float: left;
width: 180px; height: 60px;
margin-top: 29px;
background: url(../images/logo-large.svg); background-repeat: no-repeat;
font: 0/0 a; text-shadow: none; color: transparent;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.logo-shrink {
width: 90px; height: 30px;
margin-top: 14px;
}
If the animation feels jerky then you can transform and transition on a parent div, as SVG 1.1 does not allow this style to be applied on the SVG tag (though I think it works in Webkit anyways).
The easiest way is using CSS3 transforms:
e.g.
<svg style="-webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); -moz-transform: rotateZ(30deg);" width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9">
</svg>
Obviously, you can apply the styling using classes or whatever.